HTML5多媒体播放video元素
来源:互联网 发布:双串联谐振双向三端口 编辑:程序博客网 时间:2024/04/30 16:21
应该是FLASH了,便它们都需要在浏览器中安装各种插件才能使用,而且有时速度很慢。HTML5的出现使这一局面得到改观。在HTML5中,提供了音频视频的标准接口,通过HTML5中的相关技术,视频、动画、音频等多媒体播放再也不需要安装插件了,只需要一个支持HTML5的浏览器就可以了。
在介绍HTML5的video元素和 autio元素之前,让我们先来回忆一下在HTML4页面中是如何播放视频和音频数据的,
如下面代码:
很明显,这段代码具有三个缺点:
- 代码冗长且丑陋。
- 需要使用Flash插件。如果用户滑安装该插件,这段视频就不能看了,画面上会出现一片空白。
- 需要结合使用比较复杂的object元素与embed元素,并且为object元素添加许多属性和参数,代码的书写比较烦琐。
HTML5 页面中播放视频和音频的方法
在HTML5中,新增了两个元素——video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的音频数据。使用这两个元素,就不需要再使用其他插件了,只要使用支持HTML5的浏览器就可以了,同时在开发的时候也不再需要书写复杂的object元素和embed元素了。
现在,Safari 3以上、Firefox 4以上、Opera 10以上,以及Chrome 3.0以上的浏览器都实现了对video元素和audio元素的支持。
这两个元素的使用方法都很简单,首先以audio元素为例,只要把播放音频的URl地址指定给该元素的src属性就可以了,如下所示。
通过这种方法,可以把指定的音频数据直接嵌入到网页上,其中“您的浏览器不支持audio元素”为在不支持audio元素的浏览器中所显赫的替代文字。
video元素的使用方法也很简单,只要设定好元素的长、宽等属性,并且把播放视频的URL地址指定给该元素的src属性就可以了,如下所示。
另外,你还可以通过source元素来为同一个媒体数据指定多个播放格式与编码方式,以确保浏览器可以从中选择一种自己支持的播放格式进行播放,浏览器的选择顺序为代码中的书写顺序,它会从上往下判断自己对该播放格式是否支持,直到选择到自己支持的播放格式为止。source元素的使用方法如下所示。
source元素具有几个属性:src属性是指播放媒体的URL地址;type表示媒体类型,甚属性值为播放文件的MIME类型,该属性中的codes参数表示所使用的媒体编码格式。type属性是可选属性,但最好不要省略type属性,否则浏览器会在从上往下选择时无法判断自己能不能播放而先行下载一小段视频(或音频)数据,这样就有可能浪费带宽和时间了。
因为各个浏览器对于各种媒体的媒体类型及编码格式的支持情况都各不相同,所以使用source元素来指定多种媒体类型是非常有必要的。
接下来,我们来具体看一下各浏览器对于编码格式的支持情况。
- IE 9
支持H.264视频编码格式和vp8视频编码格式。
支持mp3音频编码格式和WAV音频编码格式。 - Firefox 4以上
支持Ogg Theora视频编码格式和vp8视频编码格式。
支持Ogg vorbix音频编码格式和WAV音频编码格式。 - Opera 10以上
支持Ogg Theora视频编码格式和vp8视频编码格式。
支持Ogg vorbix音频编码格式和WAV音频编码格式。 - Chrome 5以上
支持H.264视频编码格式、Ogg Theora视频编码格式和vp8视频编码格式。
支持Ogg vorbix音频编码格式和WAV音频编码格式。
- HTML5多媒体播放video元素
- Html5的多媒体元素:audio video
- HTML5-多媒体 video +audio
- html5多媒体Video/Audio
- html5 video播放
- html5 video播放调研
- html5-video视频播放
- html5 video循环播放
- html5--video播放
- HTML5播放本地Video
- html5 video播放队列
- HTML5 Video元素
- HTML5 媒体元素--------video
- html5 video 元素
- HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
- Android多媒体本地播放流程video playback
- android html5<video> 视频播放
- android webkit HTML5 video播放
- 软件工程的几个步骤
- 淘忆项目之服务器端的初始化
- 初学React,setState后获取到的thisstate没变,还是初始state?
- DNS协议笔记
- Jquery根据name和value属性循环选中radio
- HTML5多媒体播放video元素
- 最小生成树
- c++泛型编程中的traits技术
- 2016-8-22:html一些的标准
- FastDFS集群服务器搭建
- 【C#】VS根据系统自动更改引用64和32位的动态库
- Linux网络编程入门 (转载)
- getJSONObject与optJSONObject的区别
- U-Boot代码中常见汇编指令