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>
效果截图：
欢迎沟通交流~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
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学堂
极客编程技术分享
