HTML5 ???(???)

?? ????? HTML5? ??? ?? ??? ?????.

????? ???

????? ????? ???? ???? ??? ?????.

?? ???? ???? ????(Flash ?)? ?? ?????. ??? ?? ????? ??? ????? ?? ?? ????.

HTML5? video ??? ?? ???? ???? ?? ??? ?????.

???? ??

Internet Explorer 9+, Firefox, Opera, Chrome ? Safari? <video> ??? ?????.

??: Internet Explorer 8 ?? IE ?? < ;video> ??? ???? ????.

HTML5(???) - ?? ??

HTML5? ???? ????? ??? ?????.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</video>
</body>
</html>

??? ???

<video> ??? ???? ??? ? ?? ??, ?? ?? ? ?? ?? ??? ?????.

??? <video> ??? ??? ??? ???? ?? ?? ? ?? ??? ?????. ??? ??? ???? ???? ??? ? ??? ??? ??? ?????. ?? ??. . ??? ??? ???? ?? ????? ???? ??? ?? ??? ?? ????? ?? ? ?? ??? ??? ? ??? ???? ?? ???? ??? ?? ?????.

<video> ? </video> ?? ??? ??? ???? video ??? ???? ?? ?????? ????? ?????.

<video> ??? ?? ?? <source> ??? ?????. ????? ??? ?? ? ?? ?? ??? ?????.

????? ???? ??? ??

?? <video> ; ??? MP4, WebM ? Ogg? ? ?? ??? ??? ?????.

MP4 = H.264 ??? ??? ? AAC ??? ???? ??? MPEG 4 ??
WebM = VP8 ??? ??? ? Vorbis ??? ???? ??? WebM ??
Ogg = Theora ??? ??? ? Vorbis ??? ???? ??? Ogg ??

瀏覽器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO

Opera

YES (從 Opera 25 起)

YES

視頻格式

< td width="193" valign="top" style="border-width: 1px; border-style: solid; word-break: break-all;">? ?

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

格式 ?MIME ??? ??MP4? ?video/mp4? ? WebM? ?video/webm? ? Ogg? ?video/ogg

HTML5 <video> - DOM? ???? ??

HTML5 <video> , ?? ? ???.

<video> ? <audio> ??? ???, ?? ? ???? JavaScript? ???? ??? ? ????.

????? ??, ?? ?? ? ??? ?????. ??(?: ??, ?? ?)? ??? ??? ? ????. DOM ???? ?? ?? <video> ??? ?? ??, ?? ??, ?????? ??? ? ????.

??? ??? ???? <video> ??? ???? ??, ??? ?? ???? ??, ???? ???? ??? ?????.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<div style="text-align:center">
    <button onclick="playPause()">播放/暫停</button>
    <button onclick="makeBig()">放大</button>
    <button onclick="makeSmall()">縮小</button>
    <button onclick="makeNormal()">普通</button>
    <br>
    <video id="videol" width="420">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</video>
</div>
<script>
    var myVideo=document.getElementById("videol");
    function playPause()
    {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }
    function makeBig()
    {
        myVideo.width=560;
    }
    function makeSmall()
    {
        myVideo.width=320;
    }
    function makeNormal()
    {
        myVideo.width=420;
    }
</script>
</body>
</html>

??? ???

??? ??? HTML5 ???/??? DOM ?? ???? ?????.

HTML5 ??? ??

? ?? ?? ??? ??? ??

標(biāo)簽	描述
<video>	定義一個(gè)視頻
<source>	定義多種媒體資源,比如 <video> 和<audio>
<track>	定義在媒體播放器文本軌跡

<video>

??? ??

<track>

???? ??? ???? ??? ??

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <div style="text-align:center"> <button onclick="playPause()">播放/暫停</button> <button onclick="makeBig()">放大</button> <button onclick="makeSmall()">縮小</button> <button onclick="makeNormal()">普通</button> <br> <video id="videol" width="420"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支持 HTML5 video 標(biāo)簽。 </video> </div> <script> var myVideo=document.getElementById("videol"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>

?????? ???

????