HTML5 video

1.video 标签

<video width="320" height="240" controls="controls">                <!-- controls 的意思是显示播放按钮  可以播放、暂停等  -->
<source src="/i/movie.ogg" type="video/ogg">                           <!--  图片，即还没有播放视频的时候，放在上面的图片-->
<source src="/i/movie.mp4" type="video/mp4">                          <!-- 视频 -->
Your browser does not support the video tag.                              <!-- 如果浏览器不支持html5 就显示这句话 -->
</video>

当然也可以写成这样，把src写到里边

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>


属性





属性值描述



autoplay
autoplay
如果出现该属性，则视频在就绪后马上播放。




controls
controls
如果出现该属性，则向用户显示控件，比如播放按钮。




height
pixels
设置视频播放器的高度。




loop
loop
如果出现该属性，则当媒介文件完成播放后再次开始播放。




muted
muted
规定视频的音频输出应该被静音。




poster
URL
规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。




preload
preload


如果出现该属性，则视频在页面加载时进行加载，并预备播放。


如果使用 "autoplay"，则忽略该属性。






src
url
要播放的视频的 URL。




width
pixels
设置视频播放器的宽度。






HTML5 <video> - 使用 DOM 进行控制


HTML5 <video> 元素同样拥有方法、属性和事件。


其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。


下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。


例子：




 1 <!DOCTYPE html> 
 2 <html> 
 3 <body>
 4 
 5 <div style="text-align:center;">
 6 <button onclick="playPause()">播放/暂停</button>                      <!-- 调用方法 播放停止-->
 7 <button onclick="makeBig()">大</button>                                  <!-- 视频画面大小控制 -->
 8 <button onclick="makeNormal()">中</button>
 9 <button onclick="makeSmall()">小</button>
10 <br /> 
11 <video id="video1" width="420" style="margin-top:15px;">
12 <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
13 <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
14 Your browser does not support HTML5 video.
15 </video>
16 </div>
17 
18 <script type="text/javascript">
19 
20 //取到对象
21 var myVideo=document.getElementById("video1");
22 
23 //播放 停止控制
24 
25 function playPause()
26 { 
27 if (myVideo.paused) 
28 myVideo.play(); 
29 else 
30 myVideo.pause(); 
31 }
32 
33 function makeBig()
34 { 
35 myVideo.width=560; 
36 }
37 
38 function makeSmall()
39 { 
40 myVideo.width=320; 
41 }
42 
43 function makeNormal()
44 { 
45 myVideo.width=420; 
46 } 
47 </script>
48 
49 </body> 
50 </html>




 


HTML5 <video> - 方法、属性以及事件


下面列出了大多数浏览器支持的视频方法、属性和事件：





方法属性事件



play()
currentSrc
play




pause()
currentTime
pause




load()
videoWidth
progress




canPlayType
videoHeight
error




 
duration
timeupdate




 
ended
ended




 
error
abort




 
paused
empty




 
muted
emptied




 
seeking
waiting




 
volume
loadedmetadata




 
height
 




 
width
 






注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。






            

            
posted @ 
2014-04-17 12:56 
刘尊礼 
阅读(245) 
评论(0) 
 
收藏 
举报