守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 289|回复: 0

[技术资料] 使用html5 video实现视频播放

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-7-22 18:23:34 | 显示全部楼层 |阅读模式

    本文来自:http://www.365mini.com/page/html5-video.htm


    在前面的《html5 Canvas绘制图形入门详解》系列文章中,我们学习了如何使用html5 canvas进行绘图。在html5中,我们不仅可以按照自己的意愿绘制图形,还可以使用html5提供的<video>标签实现视频播放、使用html5提供的<audio>标签实现音频播放。

    今天,我们就来初步学习如何使用html5的<video>标签实现视频播放功能。

    在html5出现之前,想要在浏览器中实现视频播放功能,就必须使用额外的插件或控件来实现。不过,自从html5问世以后,这样的局面有所改变。现在,我们使用html5的video标签,可以不依赖于任何第三方的插件或控件,直接在浏览器中实现视频播放功能,

    俗话说「知己知彼,百战百胜」。对于video标签而言,同样也是如此,只有先了解了video标签,使用起来才能得心应手。现在,我们就来看看video标签具备哪些标签属性(如果video标签具有以下属性就表示启用该属性所表示的功能,不添加对应的属性就表示禁用对应的功能):

    video标签属性基本描述
    width设置视频播放器的宽度
    height设置视频播放器的高度
    src设置用于播放的视频的URL
    autoplay设置视频在加载完毕后自动开始播放。属性值为"autoplay"
    controls显示具备播放、暂停等功能的控件。属性值为"controls"
    loop视频在播放完毕后重新循环播放。属性值为"loop"
    preload指定视频在页面加载时进行加载,并预备播放。属性值为"preload",如果使用 "autoplay",则忽略该属性。

    在了解了video标签之后,下面我们就使用html5的video标签来实现视频播放。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>HTML5 video视频播放入门示例</title>
    6. </head>
    7. <body>

    8. <!-- 具备自动播放、显示用户控件、播放完毕后循环播放功能的video标签 -->
    9. <video id="myVideo" src="Enola - I Can Make A Mess.mp4" autoplay="autoplay" controls="controls" loop="loop">
    10. 您的浏览器不支持video标签。
    11. </video>
    12. </body>
    13. </html>

    现在,我们打开浏览器,看一看具体的效果:

    使用video标签添加的视频播放器使用video标签添加的视频播放器

    值得注意的是:html5的video标签目前只支持播放.mp4.ogg.webm等几种格式的视频文件,暂不支持其他格式的视频文件。此外,不同的html5浏览器支持的视频文件格式也略有不同,这种状况可能会在未来的html5中得以改善。

    为了更好地兼容各种浏览器,你可以为一个video标签添加多个source子标签,每个source标签引用一个不同格式的视频文件。这样,html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放,从而实现兼容多个浏览器的视频播放功能。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>HTML5 video视频播放入门示例</title>
    6. </head>
    7. <body>

    8. <!-- 具备自动播放、显示用户控件、播放完毕后循环播放功能的video标签 -->
    9. <video id="myVideo" autoplay="autoplay" controls="controls" loop="loop">
    10.     <!-- 提供多种格式的视频文件,以便浏览器从中播放自身支持的视频文件 -->
    11.     <source src="北京欢迎你.mp4" ></source>
    12.     <source src="北京欢迎你.ogg" ></source>
    13.     <source src="北京欢迎你.webm" ></source>
    14. 您的浏览器不支持video标签。
    15. </video>
    16. </body>
    17. </html>

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 00:00 , Processed in 0.046244 second(s), 35 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表