Html5+CSS3之音视频播放

最新推荐文章于 2023-04-22 03:00:00 发布

weixin_30569001

最新推荐文章于 2023-04-22 03:00:00 发布

阅读量144

点赞数

原文链接：http://www.cnblogs.com/doudoustrongly/p/3843703.html

版权

一、视频播放控制

　1.Html5支持的视频格式有.webm,.ogg,在Html5中播放视频所用的标签为<video controls="controls" src="dahuaxiyou.webm"></video>，其中src是引用视频文件的地址属性，controls是播放控制，如果不设置改属性，将无法控制视频的播放，例如：

 1 <!doctype html>
 2 <html>
 3 <head><title>Video</title></head>
 4 
 5 <body>
 6 <section>
 7 <video src="大笨熊.webm" controls></video>
 8 </section>
 9 </body>
10 </html>

View Code

2. 当然如果当前的浏览器如果不支持html5，那我们是不是应该给用户一个友好的提示呢，答案是必须的，例如

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Video</title>     
 5 </head>
 6 <body>
 7     <video controls="controls"  src="VID.webm" width="100"  autoplay="autoplay" loop="loop">
 8         您的浏览器不支持播放
 9     </video>
10     
11 </body>
12 </html>

View Code

　3. 如果要播放多种格式的视频，而我们有无法判断用户所使用的是哪个浏览器，那又该怎么办呢，这种情况下Html5还能保证视频的正常播放吗，针对这类问题，html5提出了多资源的播放功能，也就是<source><source>标签，我们可以在<video>标签中放置多个资源文件以引入不同的视频格式,例如：

<!DOCTYPE html>
<html>
<head>
    <title>Video</title>
</head>
<body>
    <p>多资源视频播放</p>
    <video controls="controls" >         
        <source src="VID_20131103_215333.3gp"  type="video/3pg" ></source>
        <source src="VID.webm"  type="video/webm"></source>
　　　　 ......
        您的浏览器不支持!
    </video>
</body>
</html>