Home > Article > Web Front-end > Analysis of video (video) element in html5
The content shared with you in this article is about the analysis of video (video) elements in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Until now, there was still no standard that aimed at displaying videos on web pages. Today, most videos are displayed through plug-ins such as Flash. However, not all browsers have the same plugins. HTML5 specifies a standard way to include video through the video element.
Currently, the video element supports three video formats: Ogg, MPEG4, and WebM. The browser support for these three formats is as follows:
Format | ##IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
No | 3.5 | 10.5 | 5.0 | No | |
9.0 | No | No | 5.0 | 3.0 | |
No | 4.0 | 10.6 | 6.0 | No |
Use the video element to implement video playback
<video controls=" controls"> <source src="../videoAudio/1.mp4" type="audio/mp4"></source> <source src="../videoAudio/1.ogg" type="audio/ogg"></source> 该浏览器不支持该格式的视频播放 </video>
Use Dom to operate Video
<video id="view">
<source src="../videoAudio/1.mp4" type="audio/mp4"></source><!--播放多个格式的视频-->
<source src="../videoAudio/1.ogg" type="audio/ogg"></source>
该浏览器不支持视频格式
</video>
<button onclick="play()">停止/开始</button><button onclick="toSmall()">缩小</button> <button onclick="toBig()">放大</button>
<script>
var v =document.getElementById("view");
function play(){
if(v.paused){
v.play();//播放
} else{
v.pause();//停止
}
}
function toSmall(){
v.width=300;
v.height=300;
}
function toBig(){
v.width=500;
v.height=500;
}
</script>
Video format conversion (convert MP4 format to ogg format)
HTML5 combined with the Internet to achieve 3D tunnel (with code)
H5 canvas, drag and drop events and Audio and video code examples
The above is the detailed content of Analysis of video (video) element in html5. For more information, please follow other related articles on the PHP Chinese website!