预览文章: HTML5 视频播放事件属性与API控件

标签： 文章 html5 视频 | 发表时间：2013-01-17 10:05 | 作者：领悟书生
出处：http://www.blogjava.net

在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了

 

1、视频格式的简单介绍

视频格式：avi、rmb、wmv、mpeg4、ogg、webm

视频主要有三部分组成：视频、音频、编码格式

HTML5支持的格式：

Ogg= 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4= 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

 

2、HTML5视频标签<video>属性

 
 
 
Java代码
  1. <video src="movie.mp4" controls="controls"> </video>  

 

Java代码
  1. <video src="movie.mp4" controls="controls">  
  2.    浏览器不支持HTML5的视频播放功能  
  3. </video>  

 

Java代码
  1. <video  width="300"  controls="controls"  …>  
  2.     <source src="movie.ogg" type="video/ogg">  
  3.     <source src="movie.mp4" type="video/mp4">  
  4. </video>  

 

 

3、HTML5视频API控件

获得video标签，这里是DOM对象
varvideo = document.getElementById('videoID');
也可以通过jQuery的方法，如下：
varvideo = $('#videoID').get(0);

载入视频：load() ，

播放视频：play() ，

暂停：pause() ，

快进10秒：currentTime+=10

播放速度增加：playbackRate++

播放速度增加0.1：playbackRate+=0.1

音量增加：volume+=0.1

静音：muted=true

 

3、示例

 
Java代码
  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta charset=utf-8>  
  4. <title>HTML5视频教程-视频播放功能</title>  
  5. <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  
  6. </script>  
  7. <script>  
  8. $(document).ready(function(){    
  9.     var video = $('#myvideo');  
  10.         
  11.     $("#play").click(function(){  video[0].play();  });  
  12.     $("#pause").click(function(){ video[0].pause(); });  
  13.     $("#go10").click(function(){  video[0].currentTime+=10;  });  
  14.     $("#back10").click(function(){  video[0].currentTime-=10;  });  
  15.     $("#rate1").click(function(){  video[0].playbackRate+=2;  });  
  16.     $("#rate0").click(function(){  video[0].playbackRate-=2;  });  
  17.     $("#volume1").click(function(){  video[0].volume+=0.1;  });  
  18.     $("#volume0").click(function(){  video[0].volume-=0.1;  });  
  19.     $("#muted1").click(function(){  video[0].muted=true;  });  
  20.     $("#muted0").click(function(){  video[0].muted=false;  });  
  21.     $("#full").click(function(){   
  22.       video[0].webkitEnterFullscreen(); // webkit类型的浏览器  
  23.       video[0].mozRequestFullScreen();  // FireFox浏览器  
  24.     });  
  25. });  
  26.     
  27. </script>  
  28. </head>  
  29. <video id="myvideo" width="400">  
  30.     <source src="iceage4.mp4" type="video/mp4" />  
  31.     <source src="iceage4.webm" type="video/webM" />  
  32.     <source src="iceage4.ogv" type="video/ogg" />  
  33.         你的浏览器不支持html5  
  34. </video>  
  35. <hr>  
  36. <button id="play">播放</button>  
  37. <button id="pause">暂停</button>  
  38. <button id="go10">快进10秒</button>  
  39. <button id="back10">快退10秒</button>  
  40. <button id="rate1">播放速度+</button>  
  41. <button id="rate0">播放速度-</button>  
  42. <button id="volume1">声音+</button>  
  43. <button id="volume0">声音-</button>  
  44. <button id="muted1">静音</button>  
  45. <button id="muted0">解除静音</button>  
  46. <button id="full">全屏</button>  
  47. </body>  
  48.     
  49. </body>  
  50. </html>  

 

效果

 

本文链接： HTML5 视频播放事件属性与API控件，由领悟书生原创

转载请注明出处【http://www.656463.com/article/331】


本文链接

相关 [文章 html5 视频] 推荐：

预览文章: HTML5 视频播放事件属性与API控件

- - BlogJava_首页
在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了. 视频格式：avi、rmb、wmv、mpeg4、ogg、webm. 视频主要有三部分组成：视频、音频、编码格式.

文章： HTML5之美

- - InfoQ cn
如今大热的HTML5到底美在哪里. HTML5到底能为实际的移动开发带来哪些改变. 来自阿里云云手机服务运营部的前端开发工程师 正邪 （廖健）分享了他眼中的HTML5之美，主要讲诉HTML5的常见原理并从CSS、JavaScript和框架三个方面做了细致讲解：. 白伟民：酷狗音乐的HTML5实践（百度开发者大会广州站 5月31日 免费报名）.

HTML5视频发展状况

- - HTML5研究小组
注：这篇报告来自 LongTail Video. HTML5已经进入了在线视频市场，这是一件激 动人心的事情，同时也对工业开发者提出了挑战. 随着HTML5规范和各种浏览器的不断改变，LongTail Video花费了大量的时间来弄清楚这一技术的本质，并且在各种浏览器以及设备上测试了播放效果，然后针对HTML5播放效果对产品进行了优化.

HTML5 视频直播（一）

- - JerryQu 的小站
前不久工作中遇到了在移动 WEB 端直播视频的需求，研究了一下相关技术，记录一下. 目前 WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前就只有 HLS 能用，我们重点介绍它. HTTP Live Streaming（简称 HLS）是一个基于 HTTP 的视频流协议，由 Apple 公司实现，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了对 HLS 的支持.

搅搅 HTML5 视频这滩浑水（2）HTML5 视频标准

- Richard - Apple4.us
HTML5 标准制定时曾经考虑过指定一种视频格式（包括视频编码、音频编码、容器格式）作为标准的一部分，所有浏览器厂商都必须实现. 理想的视频格式应该具有如下特性：. 解码容易，且要有硬件解码器以供处理能力不足的便携设备使用. 当时考虑过的两个组合是 Theora 视频编码、Vorbis 音频编码、Ogg 容器格式，或者 H.264/AAC/MP4（此时 Google 尚未收购 On2）.

【转载】HTML5的视频格式之争

- - HTML5研究小组
HTML5的视频格式之争. 你可能听说过，HTML5支持直接播放视频. 但是，你可能不知道的是，这背后涉及到复杂的视频格式之争，甚至还牵涉到所有的电子影像设备. 如果你想知道答案，请不要错过下面这篇精彩的文章. 它是我迄今读到的最清晰易懂的解说. 原文网址： http://ruthsarian.wordpress.com/2010/05/05/the-elephant-in-html5s-room/.

Firefox 实现 HTML5 音视频 GStreamer 后端

- - LinuxTOY
得益于 GStreamer 后端的实现，未来 Firefox 将可以使用系统内置解码器实现 HTML5 音视频的解码和播放工作. 根据 该 Mozilla Bugzilla 上的追踪，目前用于 HTML5 音视频标签播放的 GStreamer 后端支持已经实现并且得到合并许可. 此举意味着 Firefox 将可以通过 GStreamer 作为中介，使用操作系统已经具备的解码包完成 HTML5 音视频的处理工作，带来了如下好处：.

HTML5视频播放器总结

- - mo-Android
目前HTML5的各种应用在如火如荼的进行着，大家都在不断的尝试，尽管目前还没有优秀的产品出现，但是目前各方面的应用产品在层出不穷. 而我一直关注的HTML5视频播放这一块，应该说在国外是很火的，很多公司或者个人都在这推出自己的HTML5 视频播放器，详细的说明大家看下面这张图片：. 以上HTML5视频播放器，我也是使用了其中的2-3个，感觉比较好的还是Video JS，对我们开发人员来说很方便，网站有详细的文档说明，以及扩展说明等，播放器制作的很不错，很具有商业价值，下面给大家看一个我们使用的样例：.

文章： 基于HTML5和Javascript的移动应用架构

- - InfoQ cn
如果你认为你能够无视终端用户的移动化需求，那请记住：当个人电脑刚出现时，企业中的IT 部门也曾对它们有抵制情绪. 移动设备的激增正在促使IT部门做出改变，他们必须支持移动设备，并紧接着开发出友好的移动设备应用程序. 随着用户对移动设备越来越熟悉，他们对在移动设备浏览器中访问的应用程序的要求也越来越高.

分享21个非常棒的HTML5视频教程

- Amo - HTML5研究小组
现在越来越多的人尝试用HTML5来制作网页游戏等丰富的Web应用. 尽管HTML5的完全实现还有很长的路要走，但HTML5正在改变Web. 为了方便大家学习HTML5 ，本文向大家推荐21个非常棒的HTML5视频教程（很多Youtube视频需要特殊方式访问）.