HTML5 ???(???)

??? ?? ??

???? ???? Flash ????? ?????(??? ??? ???? ? 95%? ?? ??? Flash? ??????.) HTML 5 ????? ????? ?? ?? ??? ??? ??? ???? ????. ?? Flash? ?? ?? ???? ??? ???? ???? ?? ??? ? ?? ??? ???? HTML 5? ???

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

???? ??

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

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

??? ?? ??

??? ???? src, ???, ?? ??, ?? ??, ??, ???, ??, ??? ?? ?? ??? ???? ????. ?, ?? ?? <source>? ?????. Video ???? <source> ?? ??? ??? ???? ??? ? ?? ? ???? ???? ??? ?? ????.

(1) src ??? ??? ??

src ??? ?? ??? ????? ??? ? ????. <img> ??? ????? ? ??? ???? ??? ???? ? ?????. ??? ??? ?? ??? ???? ???? ?? ? ??? ??(???? ??)? ???? ? ?????. ??? ??? ???? ???? ?? ???? ??? ??? ???? ?? ? ??? ??? ? ????.

(2) preload ??

? ??? ????? ??? ? ????. ???? ?? ???? ????. ???? ??, ????? ? ????? ? ?? ??? ?? ????. ? ??? ???? ?? ?? ???? auto???.

??: ?? ??? ????. ? ?? ?? ???? ??? ???? ???? ? ???? ???? ???? ??? HTTP ??? ?? ? ????.

?????: ????? ?? ???. ? ?? ?? ????? ?? ??? ???? ???? ? ???? ???? ???? ????? ????? ?? ?????(??, ? ?? ???, ?? ??, ?? ?? ? ??)? ????? ?????.

??: ?? ?? ???? ????.

(3) ?? ?? ??

? ???? ??? ? ? ?? ? ?? ?????. Autoplay ??? ???? ?? ?? ??? ???? ? ?????. ?? Boolean ?????. ???? ????? ????, ???? ????? ?? ???? ?????.

HTML? ?? ?? ?? ?? ??? ???? ?? ?????. ??? ???? ???? ? ??? ???? true? ???? ????. ?? ???? ?? ??? ?? ?? ?? ??? ????(??? ?? ??? <video autoplay /> ?? <video autoplay???. =" autoplay" />); ??? ? ??? ???? ??? false? ?????(??? ?? ??? ?? ?? <video />).

(4) ?? ??

??? ?? loop ??? ???? ??? ????? ??? ???? ? ????, ? ?? ?? ?????.

(5) ?? ??

Controls ??? ??? ???? ?? ????? ???? ?? ????? ???? ???? ????? ???? ? ?????. ????? ?? ?? ?? ?? ????? ???.

??? ??? ?? ???? ??, ?? ??? ??, ?? ?? ?? ????? ???.

? ????? ?? ?? ??? ?? ??????? ????. ? ????? ??? ??? ?? Firefox? Safari? ??? ??? ??? ???? ??? ????? ? ? ??? ????? ?? ? ????.

(6) width ??? height ??

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

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

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

???? ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ??>Internet Explorer ? ? ??? ??? Chrome ? ? ? Firefox???????????????????????????????????????????????????????????????????????????Opera 25 ??) ? ? ? MP4 = H.264 ???? ??? MPEG 4 ?? ??? ? AAC ??? ???

WebM = VP8 ??? ??? ? Vorbis ??? ???? ??? WebM ??

Ogg = Theora ??? ??? ? Vorbis ??? ??? Ogg ??

<!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="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3school.com.cn/example/html5/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=600; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5視頻播放功能</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ var video = $('#myvideo'); $("#play").click(function(){ video[0].play(); }); $("#pause").click(function(){ video[0].pause(); }); $("#go10").click(function(){ video[0].currentTime+=10; }); $("#back10").click(function(){ video[0].currentTime-=10; }); $("#rate1").click(function(){ video[0].playbackRate+=2; }); $("#rate0").click(function(){ video[0].playbackRate-=2; }); $("#volume1").click(function(){ video[0].volume+=0.1; }); $("#volume0").click(function(){ video[0].volume-=0.1; }); $("#muted1").click(function(){ video[0].muted=true; }); $("#muted0").click(function(){ video[0].muted=false; }); $("#full").click(function(){ video[0].webkitEnterFullscreen(); // webkit類型的瀏覽器 video[0].mozRequestFullScreen(); // FireFox瀏覽器 }); }); </script> </head> <body> <video id="myvideo" width="400"> <source src="iceage4.mp4" type="video/mp4" /> <source src="iceage4.webm" type="video/webM" /> <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" /> 你的瀏覽器不支持html5 </video> <hr> <button id="play">播放</button> <button id="pause">暫停</button> <button id="go10">快進10秒</button> <button id="back10">快退10秒</button> <button id="rate1">播放速度+</button> <button id="rate0">播放速度-</button> <button id="volume1">聲音+</button> <button id="volume0">聲音-</button> <button id="muted1">靜音</button> <button id="muted0">解除靜音</button> <button id="full">全屏</button> </body> </html>

?????? ???

????