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学堂
- 微信小游戏正式上线,H5游戏迎新机遇
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[上篇]
- WCF技术剖析之十八:消息契约(Message Contract)和基于消息契约的序列化
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[上篇]
- 成为更好程序员的8种途径
- 探秘Tomcat——启动篇
- ai量化系统架构的思考
- 探秘Tomcat——连接器和容器的优雅启动
- 谈谈分布式事务之三: System.Transactions事务详解[上篇]
- WCF技术剖析之十九:深度剖析消息编码(Encoding)实现(上篇)
- 谈谈分布式事务之二:基于DTC的分布式事务管理模型[下篇]
- 孙明俊:人工智能之算力演进
- 探秘Tomcat——一个简易的Servlet容器
- 2017年与机器学习相关的10大Python开源库
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Linux 中指定使用的GPU
- 未读消息(小红点),前端 与 RabbitMQ 实时消息推送实践,贼简单~
- Day13 :调整数组顺序使奇数位于偶数前面
- TensorFlow 指定GPU 日志却显示的是第0块
- bazel 出现no such package '@org_tensorflow//tensorflow' 错误
- tensorflow API——tf.random_uniform 使用
- go cannot find package "golang.org/x/crypto/ssh/terminal" 解决方案
- go 中的 defer 使用及其规则
- 数据结构算法操作试题(C++/Python/Go)——938 二叉搜索树的范围和
- Android Studio 代理配置了Gradle依旧连接超时
- Dart 中变量类型 var, Object, dynamic 区别
- C++ 中的static关键字使用场景
- Dart 中的生产模式和检查模式
- 使用mysqladmin工具统计mysql当前的T/QPS
- MixIn 理解