HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5高级知识 ——> HTML5 视音频,知识以及案例解析(附加介绍:WEBM格式转换器)

HTML5 视音频,知识以及案例解析(附加介绍:WEBM格式转换器)

2015/05/08 15:50:20 | 作者:HTML5学堂(码匠) | 分类:HTML5高级知识 | 关键词:html5,视音频,WEBM,转换器

HTML5视音频代码实例&WEBM格式转换器

HTML5学堂:WebM由Google提出,是一个开放、免费的媒体文件格式。WebM 影片格式其实是以 Matroska(即 MKV)容器格式为基础开发的新容器格式,里面包括了 VP8 影片轨和 Ogg Vorbis 音轨。在本文将会提到如何把 WEBM 文件刻录成 DVD, 把 WEBM 文件转换成 MPEG, DivX, MP4, FLV, iPod以及其它格式。并且如何去做一个H5视频的实例。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <title></title>
  6. <style type="text/css">
  7.     body,html,div,video{margin:0;padding:0;}
  8.     .main{width:600px;height:340px;position:relative;}
  9.     video{width:600px;height:340px;}
  10.     .control{display:none;width:600px;height:22px;position:absolute;bottom:0px;background:rgba(255,255,255,0.4);font-size:16px;}
  11.     .control span{height:22px;cursor:hand;cursor:pointer;}
  12. </style>
  13. </head>
  14. <body>
  15.     <div class='main'>
  16.         <video id='movie'>
  17.             <source src='test.webm' type='video/webM'></source>
  18.         </video>
  19.         <div class='control'>
  20.             <span class='play'>播放</span>
  21.             <span class='stop'>■</span>
  22.             <span class='go'>快进</span>
  23.             <span class='back'>快退</span>
  24.             <span class='playadd'>加速</span>
  25.             <span class='playnormal'>正常</span>
  26.             <span class='playmin'>减速</span>
  27.             <span class='addvoice'>提高音量</span>
  28.             <span class='minvoice'>降低音量</span>
  29.             <span class='novoice'>静音</span>
  30.             <span class='fullscreen'>全屏</span>
  31.         </div>
  32.     </div>
  33. </body>
  34. <script src='jquery.js'></script>
  35. <script type="text/javascript">
  36.     var movie = $('#movie')[0];
  37.     movie.volume = 0.5;
  38.     $('.main').hover(function(){
  39.         $('.control').fadeIn();
  40.     },function () {
  41.         $('.control').fadeOut();
  42.     });
  43.     var conB = true;
  44.     $('.play').click(function () {
  45.         if (conB) {
  46.             movie.play();
  47.             conB = false;
  48.             this.innerHTML = '||';
  49.         }else {
  50.             movie.pause();
  51.             conB = true;
  52.             this.innerHTML = '播放';
  53.         }
  54.     });
  55.     $('.stop').click(function () {
  56.         movie.currentTime=0;
  57.         movie.pause();
  58.     });
  59.     $('.go').click(function () {
  60.         movie.currentTime+=10;
  61.     });
  62.     $('.back').click(function () {
  63.         movie.currentTime-=10;
  64.     });
  65.     $('.playadd').click(function () {
  66.         if (movie.playbackRate<=1.9) {
  67.             movie.playbackRate+=0.1;
  68.         }else {
  69.         //不可大于两倍速
  70.         }
  71.     });
  72.     $('.playmin').click(function () {
  73.         if (movie.playbackRate>=0.6) {
  74.             movie.playbackRate-=0.1;
  75.         }else {
  76.         //不可小于一半速度
  77.         }
  78.     });
  79.     $('.playnormal').click(function () {
  80.         movie.playbackRate=1;
  81.     });
  82.     $('.addvoice').click(function () {
  83.         if (movie.volume<1.2) {
  84.             movie.volume+=0.1
  85.         }else {
  86.         //不可高于120%音量
  87.         }
  88.     });
  89.     $('.minvoice').click(function () {
  90.         if (movie.volume>0) {
  91.             movie.volume-=0.1
  92.         }else {
  93.         //不可低于0%音量
  94.         }
  95.     });
  96.     var volB = true;
  97.     $('.novoice').click(function () {
  98.         if (volB) {
  99.             movie.muted = true;
  100.             volB = false;
  101.         }else {
  102.             movie.muted = false;
  103.             volB = true;
  104.         }
  105.     });
  106.     $('.fullscreen').click(function () {
  107.         movie.webkitEnterFullscreen(); // webkit类型的浏览器
  108.         movie.mozRequestFullScreen(); // FireFox浏览器
  109.     });
  110. </script>
  111. </html>

效果截图:

HTML5学堂 移动端接口 H5高级知识

欢迎沟通交流~HTML5学堂

还不太清楚如何通过js获取视频的总播放时间

WebM由Google提出,是一个开放、免费的媒体文件格式。WebM 影片格式其实是以 Matroska(即 MKV)容器格式为基础开发的新容器格式,里面包括了 VP8 影片轨和 Ogg Vorbis 音轨。Google 说 WebM 的格式相当有效率,应该可以在 netbook、tablet、手持式装置等上面顺畅地使用。

这里你可以找到 WEBM 转换器的应用程序,了解如何把 WEBM 文件刻录成 DVD, 把 WEBM 文件转换成 MPEG, DivX, MP4, FLV, iPod以及其它格式。

WEBM格式转换器: http://www.dvdvideosoft.com/cn/converter/video/webm-video-converter.htm

HTML5学堂 移动端接口 H5高级知识

 

HTML5学堂 移动端接口 H5高级知识

a元素支持"download"属性

下面的介绍引用自HTML5规范草案:

为了表明一个资源是让用户下载的,而不是立即显示的,可以给a元素或area元素添加download属性来创建一个能下载该资源的超链接.

该属性最适合和Blob配合使用.有了Blob,你可以使用JavaScript创建文件.一个二进制blob文件可以是一个用canvas元素生成的图片.将blob URL(使用URL构造器生成)设置为a元素的链接并且给这个a元素指定download属性,然后通过点击这个链接,用户就能把对应的blob文件下载到它们的硬盘上.

下面的代码示例来自于Tom Schuste(他在Nightly中实现了download属性)的文章:

var blob = new Blob(["Hello World"]);

var a = document.createElement("a");

a.href = window.URL.createObjectURL(blob);

a.download = "hello-world.txt";

a.textContent = "Download Hello World!";

 

兼容性问题:

补充说明:play()等方法在移动端并没有得到支持,在移动端,使用HTML5中的视音频,会自动调用软件内置的播放器,用网页的形式打开

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS