Before HTML5, there was no standard for displaying video on web pages. In the meantime, videos could only be played with plug-ins (such as flash).
The HTML5 <video> element now defines a standard way to embed videos in web pages.
1. Browser Support
The following are browser versions that support the HTML5 <video> element.
2. How Does It Work
The control attribute allows the video to be controlled, such as play, pause, and volume.
If the height and width are not set, the browser cannot know the size of the video, which can cause effects when the video is loaded.
Multiple <source> elements can be links to different video files. The browser will use the first initialization of the file format.
3. HTML5 Video Format
Currently, there are 3 video formats supported by the <video> element such as; MP4, WebM, and Ogg.
| Browser | MP4 | WebM | Ogg |
|-------------------|---------------------|------|-----|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
| Browser | MP4 | WebM | Ogg |
| Internet Explorer | YES | NO | NO |4. HTML Video - Media Type
| File Format | Media Type |
|-------------|------------|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |5. HTML Video - Methods, Properties, and Events
HTML5 defines DOM methods, properties, and events for the <video> element. This allows you to load, play, and pause videos, as well as set duration and volume.
There are also DOM events that can tell you when a video starts playing, pauses, etc.
For more DOM reference, please visit here HTML5 Audio/Video DOM Reference
6. HTML5 Video - Tags
| Tag | Description |
|----------|----------------------------------------------------------------------------------|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |Project Example
<!DOCTYPE HTML>
<html>
<!-- bundet.com -->
<head>
<title> The video element</title>
</head>
<center>
<body>
<h1>Memutar Video</h1>
<video width="850" height="450" controls poster="video/cover.jpg" preload="metadata">
<source src="video/chrome.mp4" type="video/mp4"/>
<P>This browser does not support the video element.</P>
</video>
</body></center>
</html>The result:
How to Embed Dropbox Videos in Blog Posts
I am trying to add a dropbox hosted video to a page and I have used both and it won't play. I have also tried using the code block <iframe>...</iframe> but it won't play.
Introduction
There is a Dropbox help article on how to do this. See the section titled "Rendering files in your browser." However, using an iframe, I tried the method described there and couldn't get it to work.
There is a question and answer about this on StackOverflow, Embed Dropbox into HTML website . The short answer is: It can't be done. For why, see the StackOverflow question.
I Googled "embed dropbox video" and found an answer using <video>...</video> HTML5 tags. See How to Use Dropbox to Host and Stream Video . However I couldn't get this to work either. The video embedded but wouldn't play. I tried this method using an iframe; it also embedded but wouldn't play.
So, I don't think it can be done. (You can upload the video to YouTube or Vimeo and use the embed code they will generate in an iframe. That should work.)
If anyone finds a workable solution, I'd be interested to see it.
Completion
Try using videojs, as that's what Dropbox uses to render video previews when you use a share link. Also remember to use
https://www.dropbox.com/s/rnmumqc7k811i1p/IMG_7054.MOV?dl=1to get the actual source files.
Conclusion
Thank you so much seebrown. I had tried everything, but nothing worked. The settings dl=1 in the php script gave me the insight. The share link in dropbox had it dl=0 at the end, and that turned out to be the culprit. Thanks again!! 