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

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

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

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

HTML5(???) - ?? ??

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

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

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

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

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

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

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

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

QQ截圖20161013163806.png

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

??? ??

QQ截圖20161013163801.png

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

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

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

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

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

????

HTML5 ??? ??

QQ截圖20161013163849.png

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)</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="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> 您的瀏覽器不支持 HTML5 video 標簽。 </video> </div> <script> var myVideo=document.getElementById("video1"); 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>

?????? ???

????