HTML连载9-video标签的第二种格式&audio标签
一、video第二种格式
1.背景:由于视频数据非常重要,所以五大浏览器厂商都不愿意支持别人的视频格式,所以导致了没有一种视频格式是所有浏览器都支持的。这个时候W3C为了解决这个问题,所以推出了第二种video标签的格式。
2.格式:
<video controls="controls" width="500px" height="500px"> <source src="地址" type="video/webm"></source> <source src="地址" type="video/MPEG4"></source> <source src="地址" type="video/Ogg"></source> </video>
3.浏览器解析逻辑
来源:http://www.w3school.com.cn/html5/html_5_video.asp
不同浏览器支持的格式种类不同,大致可以分为三类格式:webm、MPEG4、Ogg。我们这里三种格式都写上了,因此会逐一进行校验,直至成功为止。
4.注意:当前通过video标签的第二种格式虽然能够指定所有的浏览器都支持的视频格式,但是显然所有的浏览器都通过video标签播放视频还有一个前提条件,就是浏览器必须都支持HTML5标签,否则同样无法播放,在过去的一些浏览器是不支持HTML5标签的,所以为了让过去的一些浏览器也能够通过video标签来播放视频,我们以后可以通过一个JS的框架叫做html5media来实现
二、audio标签
1.作用:用来播放视频
2.格式:(两种,类似video标签)
<audio src="地址" controls="controls"></audio>
或者
<audio controls="controls"> <source src="地址" type="audio/audimp3"> <source src="地址" type="audio/Ogg Vorbis"> <source src="地址" type="audio/Wav"> </audio>
3.(1)属性(除了height、width、poster不能用,其他都可以)(2)两种格式(3)解析逻辑(4)注意点
都同video标签类似,可见连载8
三、源码
d53_video_label_second_form
d54_audio_label_exercise
地址:https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)
3.简书:https://www.jianshu.com/u/a9169ca4f1c9(心悦君兮君不知dqr)
4.欢迎关注微信公众号:傅里叶变换
HTML连载9-video标签的第二种格式&audio标签的更多相关文章
- H5 video标签的第二种格式
36-video标签的第二种格式 2.第二种格式存在的意义: 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的 这个时候W3 ...
- 课时53.video标签第二种格式(掌握)
由于视频数据非常非常的重要,所以五大浏览器厂商都不愿意支持别人都视频格式,所以导致了没有一种视频格式是所有浏览器都支持的,这个时候W3C为了解决这个问题,所以推出了第二种video标签的格式 如何查看 ...
- 课时54.audio标签(掌握)
1.什么是audio标签? 播放音频 格式: <audio src=""> </audio> 也是由于同样的适配问题,所以出现了第二种格式 <audi ...
- Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
- H5 audio标签
37-audio标签 注意点: audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样 只不过有3个属性不能用, heig ...
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- audio标签
实例 一段简单的 HTML 5 音频: <audio src="someaudio.wav"> 您的浏览器不支持 audio 标签. </audio> 亲自 ...
- 今天我们要说的画一个三角形,恩,画一个三角形,第一种呢是利用我们的html标签结合css来实现;而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕,那么顾名思义就是在网页里建造一个画板,用来画画,好,那接下来就和我一起去看看吧!
第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
- <video>和<audio>标签,对视频和音频的支持
H5新增了<video>和<audio>标签,提供对视频和音频的支持 <audio>的属性与<video>属性相同 <video> vide ...
随机推荐
- andriod 实现新浪、QQ场地、朋友微信圈、微信朋友分享功能
前言:在自己的学习过程中的一些操作,分享一些理解. 下面将说明什么: 下载链接:http://download.csdn.net/detail/u014608640/7490357 首先.我们须要去S ...
- 发布与订阅SQLServer
SQLServer 中发布与订阅 在对数据库做迁移的时候,会有很多方法,用存储过程,job,也可以用开源工具lettle,那么今天这些天变接触到了一种新的方法,就是SqlServer中自带的发布与订阅 ...
- Twitter "like" 动画实战
http://zhuanlan.zhihu.com/FrontendMagazine/20486738
- Cache coherence protocol
A cache coherence protocol facilitates a distributed cache coherency conflict resolution in a multi- ...
- [Unity3D]Unity3D游戏开发Lua随着游戏的债券(在)
---------------------------------------------------------------------------------------------------- ...
- WPF中3D旋转的实现
原文:WPF中3D旋转的实现 关于3D旋转的原理,请看Daniel Lehenbauer的文章 <Rotating the Camera with the Mouse> http://vi ...
- python下载图片(3)
# -*- coding: utf-8 -*-"""some function by metaphy,2007-04-03,copyleftversion 0.2&quo ...
- Android面HTTP协议发送get要求
/** * 采纳get办法要求 * * @param username * @param password * @return null表示求得的路径有问题,text返回请求得到的数据 */ publ ...
- WPF - 模板查看工具:Show Me The Template及如何查看第三方主题
原文:WPF - 模板查看工具:Show Me The Template及如何查看第三方主题 在学习WPF的模板(DataTemplate.ItemsPanelTemplate.ControlTemp ...
- 资源文件加载(Pack URI 方案)
Pack URI 在 Windows Presentation Foundation (WPF) 中,使用统一资源标识符 (URI) 标识和加载文件的方式有很多,包括:1.指定当应用程序第一次启动时显 ...