How do I embed a video using html5?

不羁的心 提交于 2021-02-04 07:39:53

问题


Hello I'm building a webpage I've got everything else but i don't know how to embed a video using html5? This is very important in my website so help would be very appreciated.


回答1:


<video id="myMovie" width="640" height="360" poster="video.png"  >
     <source src="20140810_131405.mp4">
</video>

using the video tag. The poster attribute is the thumbnail pic. Obviously the source links to the actual video file.




回答2:


Before HTML5, videos could only be played with a plug-in (like flash). The HTML5 element specifies a standard way to embed a video in a web page.

 <video width="420" height="340" controls>
  <source src="sample_movie.mp4" type="video/mp4">
  <source src="sample_movie.ogg" type="video/ogg">
Your browser does not support the video tag.
 </video> 

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes.

If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.

Text between the <video> and </video> tags will only display in browsers that do not support the element.

The src attribute can be a URL of the audio file or the path to the file on the local system. Multiple <source> elements can link to different video files. The browser will use the first recognized format, In other words, it will pick the first one which works for it. In the above case, if it recognizes type="video/mp4" it will pick that one instantly. (Usually happens to beat the different versions of browsers). If you wish to start a movie automatically, simply use the autoplay attribute like this:

 <video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

For a deeper read: w3schools and MDN



来源:https://stackoverflow.com/questions/32032035/how-do-i-embed-a-video-using-html5

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!