专栏首页逸鹏说道05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html

源码案例 :https://github.com/dunitian/LoTHTML5

1.引 入

概述

音频文件或视频文件都可以看做是一个容器文件(类似于压缩的zip)

编解码器就是读取特定的容器格式,对其中的音频与视频轨进行解码,然后实现播放

解码器

解码器(decoder),是一种输入模拟视频信号并将它转换为数字信号格式,以进一步压缩和传输的硬件/软件设备

视频格式

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

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

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

支持状况

audio的canPlayType可以检测浏览器支持的文件格式

在线检测(右击查看源码)

http://dnt.dkill.net/DNT/HTML5/demo/check.html

2.video

逆天测试仅供参考

测试浏览器:谷歌,360,火狐,Edge,IE :mp4格式的基本上都支持了,wmv格式的基本上都不支持,avi格式的火狐不支持

案例

1.简单案例:

<videosrc="images/big.mp4"controls loop>你的浏览器不支持</video>

<videosrc="images/big.mp4"poster="http://dnt.dkill.net/Images/banner.jpg"controlsloop></video>

说明:

loop 循环播放

controls 显示工具栏

<videosrc="images/big.mp4"controls>你的浏览器不支持</video>

poster 视频预览图

<videosrc="images/big.mp4"poster="http://dnt.dkill.net/Images/banner.jpg"controlsloop></video>

autoplay 自动播放

<videosrc="images/big.mp4"controlsautoplay loop>你的浏览器不支持</video>

preload 是否在页面加载后载入视频 如果设置了 autoplay 属性,则忽略该属性

属性值:

auto - 当页面加载后载入整个视频

meta - 当页面加载后只载入元数据 (有些是浏览器是metadata)

none - 当页面加载后不载入视频

<videosrc="images/big.mp4"controlspreload="auto">你的浏览器不支持</video>

2.多源案例

浏览器自动选择第一个可识别的文件来播放

<videocontrols>

<sourcesrc="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4"/>

<sourcesrc="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"/>

</video>

3.小播放器

<videoid="myvideo"src="../images/big.mp4"poster="http://dnt.dkill.net/Images/banner.jpg" controlsloop>回家休息休息。。。</video>

<scripttype="text/javascript">

var musicObj = $("#myvideo");

//单击控制播放与否

musicObj.click(function () {

if (this.paused) {

this.play();

} else {

this.pause();

}

});

</script>

扩展:https://github.com/dunitian/LoTHTML5/tree/master/LoTVideo

3.audio

学过video之后这个就小儿科了,简单介绍一下

基本用法

<audiosrc="http://dnt.dkill.net/DNT/music/棋子.mp3"controls></audio>

<audiocontrols>

<sourcesrc="http://www.dkill.net/DNT/music/棋子.ogg"type="audio/ogg"/>

<sourcesrc="http://dnt.dkill.net/DNT/music/棋子.mp3"type="audio/mp3"/>

</audio>

本文分享自微信公众号 - 我为Net狂(dotNetCrazy),作者:毒逆天

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-19

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JSONP挖掘与高级利用

    0x00 参考资料 利用JSONP进行水坑攻击 - 乌云知识库 JSONP 安全攻防技术 - 知道创宇 0x01 漏洞之我见 这里不多说JSONP的介绍等,大家...

    逸鹏
  • Web前端性能优化教程03:网站样式和脚本&减少DNS查找、避免重定向

    一、将样式表放在顶部 可视性回馈的重要性 进度指示器有三个主要优势——它们让用户知道系统没有崩溃,只是正在为他或她解决问题;它们指出了用户大概还需要等多久,以便...

    逸鹏
  • 解决session阻塞的问题

    简介 对于数据库运维人员来说创建session或者查询时产生问题是常规情况,下面介绍一种很有效且不借助第三方工具的方式来解决类似问题。 最近开始接触运维...

    逸鹏
  • 简单实现Promise

    可以看到promise的规范很详细很明确,只要将规范翻译成代码,就可以实现一个完整的Promise。当然本文只是对Promise的简单实现,一些复杂的情况暂且不...

    IMWeb前端团队
  • 用 ORACLE 的方法管理 POSTGRESQL 还是用MYSQL 的方式管理POSTGRESQL

    写这篇文字的起因是众多的DB们投入到学习PG数据库,遇到了一些困难,其实提出这个题目的时候,其实我也在想,每种数据库都有自己的适合的管理方法,有些是管理方法实则...

    AustinDatabases
  • 小程序富文本编辑器editor初体验

    在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还在感慨官方什么时候出个比较全面的富文本组件,谁知道没几天就发布了...

    Bug生活2048
  • Mac中使用sed -i替换文本内容错误

    程序员不务正业
  • ubuntu环境下解决mysql不能远程访问问题

    落叶大大
  • 30天轻松掌握JavaWeb-学习目录

    17.使用beanUtils操纵javabean

    MonroeCode
  • Hacking with iOS: SwiftUI Edition - 纸杯蛋糕项目(一)

    在此项目中,我们将构建一个用于订购蛋糕的多屏应用。这将使用两种形式,这对您来说是个老新闻,但您还将学习如何在具有@Published属性的情况下使类符合Coda...

    韦弦zhy

扫码关注云+社区

领取腾讯云代金券