Video element

Playing Videos in HTML

Before HTML5,there was no standard for showing videos on a web page.

Before HTML5,videos could only be played with a plug-in(like flash).

The HTML5 <video> element specifies a standard way to embed a video in a web page.

Browser Support



The HTML <video> Element

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

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

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

Multiple <source> elements can link to different video files.The browser will use the first recognized format.

Html <video> Autoplay

<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>*The autoplay attribute does not work in mobile devices like iPad and iPhone.

Html video - Browser Support



HTML Video - Media Types


Html Video - Methods,Properties,and Events

<section>
<input type="button" onclick="playPause" value="Play/Pause">
<input type="button" onclick="makeBig" value="Big"> <pre name="code" class="html"> <input type="button" onclick="makeNormal" value="Normal"> <input type="button" onclick="makeSmall" value="small"> <video id="viedo1" width="420"> <source src="XX/XXX.mp4" type="video/mp4"> </video></section><script> var myVideo = document.getElementById("video1"); function playPause(){ if(myVideo.paused){
myVideo.play(); }slse{ myVideo.pause(); } } function makeBig(){ myVideo.width=500; } function makeSmall(){ myVideo.width=320; } function makeNormal(){ myVideo.width=420; }

Html <video> Tag 
Optional Attributes



HTML <source> Tag

An audio player with two source files.The browser should choose which file (if any) it has support for:

<audio controls>
<source src="xx.ogg" type="audio/ogg">
<source src="xx.mp3" type="audio/mpeg">
Your browser dose not support the audio element.
</autio>

编解码工具,方面来回转换视频
FFmpeg  www.ffmpeg.org