+发表新主题
查看: 2470|回复: 2

[HTML5开发] h5 - 视频处理

[复制链接]

[HTML5开发] h5 - 视频处理

[复制链接]
GT雨燕 发表于 2016-2-26 00:00:00 浏览:  2470 回复:  2 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
   1. 视频处理

     * 基本内容

       * 目前实现网页视频播放的技术 - Flash

           * Flash并不是浏览器原生支持(第三方组件)

               * Flash的性能并不好

               * 移动端不支持Flash技术

       * HTML 5提供的视频处理技术 - <video>

           * 提供了相对应的基本处理方式

                      * 提供了高级编程自定义方式

           * <video>元素所支持的视频格式

               * MP4格式 - 视频文件扩展名为".mp4"

                     * OGG格式 - 视频文件扩展名为".ogv"

                      * WEBM格式 - 视频文件扩展名为:".webm"

     * 如何使用<video>元素播放视频

       * 引入单个视频格式

         <video src="视频文件的路径" autoplay>

                    浏览器不支持的提示内容

                   </video>

                    * autoplay属性 - 自动播放视频

                   * width属性 - 设置视频的宽度

                   * height属性 - 设置视频的高度

                   * style属性 - 设置CSS样式

                   * class属性 - 设置CSS样式



例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>如何使用video元素一</title>

  7. </head>

  8. <body>

  9.   <!--

  10. <video>元素 - 起始元素

  11. * src属性 - 引入视频文件的路径

  12. * width属性 - 设置视频的宽度

  13. * height属性 - 设置视频的高度

  14. * style属性 - 设置CSS样式

  15. * class属性 - 设置CSS样式

  16. * autoplay属性 - 自动播放视频

  17.   * 只需要定义属性名即可(不需要属性值)

  18. 问题 - 如果浏览器不支持HTML 5的<video>

  19. * 在<video>元素内,提供对应提示内容

  20.   -->

  21.   <video src="oceans.mp4" autoplay width="640px" height="400px" style="background:black;">

  22. 非常抱歉,你的浏览器不支持该视频!

  23.   </video>

  24. </body>

  25. </html>
复制代码
效果如下：

    235029ren7ypos400ziyy8.png

       * 引入多个视频格式

      <video autoplay>

                 <source src="视频文件的路径" />

                 <source src="视频文件的路径" />

                 <source src="视频文件的路径" />

                  浏览器不支持的提示内容

        </video>

     * <video>元素的特有属性

       * autoplay属性 - 自动播放

       * controls属性 - 提供控制面板

       * loop属性 - 循环播放

       * poster属性 - 播放之前实现一张图片

       * preload属性 - 预加载视频

         * none - 不预加载

                    * auto - 默认值,尽快预加载

                    * metadata - 预加载除视频之外的内容(宽度、高度等)



例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>如何使用video元素二</title>

  7. </head>

  8. <body>

  9.   <!-- 解决了浏览器对视频格式的兼容问题 -->

  10.   <video controls loop poster="oceans.png">

  11. <!--

  12. <source>元素

  13. * 引入视频文件(一个<video>元素允许包含多个<source>)

  14. -->

  15. <source src="oceans.mp4" />

  16. <source src="oceans.ogv" />

  17. <source src="oceans.webm" />

  18.   </video>

  19. </body>

  20. </html>
复制代码
播放之前页面效果：

235029ren7ypos400ziyy8.png

点击播放按钮后：

   235029ren7ypos400ziyy8.png

    * 视频高级编程方式

      * 事件

         * play - 视频播放时触发

                   * pause - 视频暂停时触发

                  * ended - 视频播放结束时触发

                  * error - 视频播放错误时触发

例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>video元素的高级事件</title>

  7.   <style>

  8. img {

  9. position: absolute;

  10. top : 66px;

  11. left : 160px;

  12. display : none;

  13. }

  14.   </style>

  15. </head>

  16. <body>

  17.   <video id="mmedia" src="oceans.mp4" controls></video>

  18.   <img id="adv" src="oceans.png" width="320">



  20.   <script>

  21. var mmedia = document.getElementById("mmedia");

  22. var adv = document.getElementById("adv");

  23. mmedia.addEventListener("pause",function(){

  24. adv.style.display = "block";

  25. });

  26. mmedia.addEventListener("play",function(){

  27. adv.style.display = "none";

  28. });

  29.   </script>

  30. </body>

  31. </html>
复制代码
在播放过程中,点击暂停后：

235029ren7ypos400ziyy8.png

点击播放后：

235029ren7ypos400ziyy8.png

      * 方法

         * play() - 用于播放视频

                   * pause() - 用于暂停视频

                   * load() - 用于加载视频

                    * canPlayType() - 判断当前浏览器是否支持当前视频格式

     * 属性

         * paused - 如果视频为暂停或未播放时,返回true

                   * ended - 如果视频播放完毕时,返回true

                   * duration - 返回当前视频的时长

                   * currentTime - 获取或设置视频的当前位置



例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>video元素的高级方法</title>

  7. </head>

  8. <body>

  9.   <video id="mmedia" src="oceans.mp4"></video>

  10.   <br>

  11.   <input type="button" id="btn" value="播放">

  12.   <script>

  13. var btn = document.getElementById("btn");

  14. var mmedia = document.getElementById("mmedia");

  15. btn.onclick = function(){

  16. if(mmedia.paused){// 如果当前处于暂停状态

  17. // 播放视频

  18. mmedia.play();

  19. // 修改button值为暂停

  20. this.value = "暂停";

  21. }else{// 否则当前处于播放状态

  22. // 暂停视频

  23. mmedia.pause();

  24. // 修改button值为播放

  25. this.value = "播放";

  26. }

  27. }

  28.   </script>

  29. </body>

  30. </html>
复制代码
页面加载完效果：

235029ren7ypos400ziyy8.png

点击播放按钮后：

235029ren7ypos400ziyy8.png

点击暂停按钮后：

235029ren7ypos400ziyy8.png
回复

使用道具 举报

精彩评论 (2) QQ好友和群QQ好友和群

0

主题

14

帖子

47

积分

豁然贯通

Rank: 5Rank: 5

积分
47
QQ
愉悦or喻悦 发表于 2016-2-28 06:51:32 显示全部楼层
其实我一直觉得楼主的品味不错！呵呵！
回复 支持 反对

使用道具 举报

4

主题

15

帖子

41

积分

豁然贯通

Rank: 5Rank: 5

积分
41
QQ
cdlili 发表于 2016-2-28 15:47:04 显示全部楼层
其实我一直觉得楼主的品味不错！呵呵！
回复 支持 反对

使用道具 举报


高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GT雨燕
技冠群雄

23

主题

23

帖子

102

积分

技冠群雄

Rank: 6Rank: 6

积分
102
QQ
英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网