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.

Using html5 video background

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.

Video formats supported by browsers

Currently, the video element supports three video formats: Ogg, MPEG4, and WebM. The browser support for these three formats is as follows:

##OggMPEG 4WebM

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

##Ogg format is an Ogg file with Theora video encoding and Vorbis audio encoding. MPEG4 format is an MPEG 4 file with H.264 video encoding and AAC audio encoding. The mp4 format belongs to this format, and the WebM format It is a WebM file with VP8 video encoding and Vorbis audio encoding.

Use the video element to implement video playback

The control attribute of the video element is used to add play, pause and volume controls, between The inserted content is for display by browsers that do not support the video element. The source element can link different video files to solve the problem of browser compatible video formats. Two source elements are used below to enable the above five browsers to play the video. . The simple code is as follows:

<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

Use custom buttons to implement playback, pause, and video size control of the controls attribute.

<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) 1. First download ffmpeg and enter the URL www.ffmpeg.org (open source URL ), enter windows to download the windows version of the file.

2. Decompress the ffmpeg compressed file (take ffmpeg-20180803-5aeb3b0-win32-static.zip as an example), and add the path to the ffmpegbin directory to the environment variable path (G:\mydeveloperapplication\hbuilder\html5\ffmpeg -20180803-5aeb3b0-win32-static\bin).

3. After setting the environment variables, type ffmpeg in the DOS command form to test whether it can run.

4. Switch to the directory where the mp4 video file is located in the DOS command window, and finally type ffmpeg -i 1.mp4 -acodec libvorbis 1.ogg (here, replace 1.mp4 with 1. ogg).

5.ffmpeg detailed commands.

Recommended related articles:

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!