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

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

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

<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style type="text/css">
    body,html,div,video{margin:0;padding:0;}
    .main{width:600px;height:340px;position:relative;}
    video{width:600px;height:340px;}
    .control{display:none;width:600px;height:22px;position:absolute;bottom:0px;background:rgba(255,255,255,0.4);font-size:16px;}
    .control span{height:22px;cursor:hand;cursor:pointer;}
</style>
</head>
<body>
    <div class='main'>
        <video id='movie'>
            <source src='test.webm' type='video/webM'></source>
        </video>
        <div class='control'>
            <span class='play'>播放</span>
            <span class='stop'>■</span>
            <span class='go'>快进</span>
            <span class='back'>快退</span>
            <span class='playadd'>加速</span>
            <span class='playnormal'>正常</span>
            <span class='playmin'>减速</span>
            <span class='addvoice'>提高音量</span>
            <span class='minvoice'>降低音量</span>
            <span class='novoice'>静音</span>
            <span class='fullscreen'>全屏</span>
        </div>
    </div>
</body>
<script src='jquery.js'></script>
<script type="text/javascript">
    var movie = $('#movie')[0];
    movie.volume = 0.5;
    $('.main').hover(function(){
        $('.control').fadeIn();
    },function () {
        $('.control').fadeOut();
    });
    var conB = true;
    $('.play').click(function () {
        if (conB) {
            movie.play();
            conB = false;
            this.innerHTML = '||';
        }else {
            movie.pause();
            conB = true;
            this.innerHTML = '播放';
        }
    });
    $('.stop').click(function () {
        movie.currentTime=0;
        movie.pause();
    });
    $('.go').click(function () {
        movie.currentTime+=10;
    });
    $('.back').click(function () {
        movie.currentTime-=10;
    });
    $('.playadd').click(function () {
        if (movie.playbackRate<=1.9) {
            movie.playbackRate+=0.1;
        }else {
        //不可大于两倍速
        }
    });
    $('.playmin').click(function () {
        if (movie.playbackRate>=0.6) {
            movie.playbackRate-=0.1;
        }else {
        //不可小于一半速度
        }
    });
    $('.playnormal').click(function () {
        movie.playbackRate=1;
    });
    $('.addvoice').click(function () {
        if (movie.volume<1.2) {
            movie.volume+=0.1
        }else {
        //不可高于120%音量
        }
    });
    $('.minvoice').click(function () {
        if (movie.volume>0) {
            movie.volume-=0.1
        }else {
        //不可低于0%音量
        }
    });
    var volB = true;
    $('.novoice').click(function () {
        if (volB) {
            movie.muted = true;
            volB = false;
        }else {
            movie.muted = false;
            volB = true;
        }
    });
    $('.fullscreen').click(function () {
        movie.webkitEnterFullscreen(); // webkit类型的浏览器
        movie.mozRequestFullScreen(); // FireFox浏览器
    });
</script>
</html>

效果截图:

还不太清楚如何通过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

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学堂(h5course-com)

原文发表时间:2015-08-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

20个为前端开发者准备的文档和指南8

1.Meteor: The Official Guide(Meteor官方指南) Meteor介绍的链接地址: http://www.geekpark.net/...

3545
来自专栏李成熙heyli

性能优化三部曲之三——Node直出让你的网页秒开

项目: 手Q群成员分布直出 原因: 为家校群业务直出做准备 群成员分布业务是小型业务,而且逻辑相当简单,方便做直出试验田 基本概念: 直出其实并不算是新概念。只...

6557
来自专栏非著名程序员

网易严选 App 感受 Weex 开发

这一篇来自于网易的前端工程师分享的一篇关于使用 Weex 开发网易严选的文章,内容非常的详细,认真,希望对大家能够有所帮助。 自打出生的那一天起,WEEX就免不...

8088
来自专栏DeveWork

丰富排版页面——为你的wordpress主题添加短代码形式美化框

相信有些wordpresser知道这个东东,在一些主题上这是标配,如deve主题、iartwork主题。原理大概是通过wordpress本身的短代码功能,事先在...

3366
来自专栏小轻论坛

这款功能强大的视频压制工具,用了就爱不释手了

为什么今天给大家推荐这个软件呢?因为最近工作需要,每天要处理一百多篇视频加水印的工作,主任老王给我们推荐狸窝全能视频转换器,相信用过的人都知道,软件界面上并不能...

8013
来自专栏JackieZheng

AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

前言:   "宁肯像种子一样等待    也不愿像疲惫的陀螺    旋转得那样勉强"   这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有...

2536
来自专栏刘望舒

Android启动页黑屏及最优解决方案

相信做过Android的朋友都知道,当一个APP启动时,界面会首先展示一个白屏或者黑屏,然后再进入欢迎页,稍作停留最后进入APP主页。那么这个黑屏或者白屏到底是...

1163
来自专栏拂晓风起

cocos2d-js 入门 (主要是HTML5)

4345
来自专栏DannyHoo的专栏

iOS开发中在swift项目中使用Kingfisher下载图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details...

1124
来自专栏互联网杂技

前端科普文:为什么&lt;!DOCTYPE&gt; 不可或缺

When question comes 你一定在 HTML 页面最前面看到过这样一行代码(比如 百度): <!DOCTYPE html> 或者说类似这样的(比如...

3458

扫码关注云+社区