html5<source>元素使用实例讲解

　　<source>标签元素可以使用的元素的上下文：作为媒体元素的子元素，在任何流内容或 track元素之前，可以没有结束标签。以下是青锋建站给大家分享的html5中<source>元素使用实例讲解，主要侧重于使用JAVASCRIPT来操作<source>标签元素以及<source>标签元素的DOM接口的使用。

<source>标签的全局属性：

src - 数据资源的地址；
type - 嵌入数据资源的类型；

<source>DOM接口：

interface HTMLSourceElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString type;
           attribute DOMString media;
};

<source>属性使用讲解：

<source>元素允许作者为媒体元素指定多种可选媒体资源。它本身并不代表任何东西。

1、SRC属性
　　它给出媒体资源的地址。该值必须是一个有效的非空URL，可能被空间包围，此属性必须存在。
　　当元素已经插入到视频或音频元素中时，动态修改源元素及其属性将没有效果。想要改变播放的媒体来源，只要使用媒体元素的src属性的直接修改即可，可以使用的canplaytype()方法选择可用资源。一般来说，在解析文档后手动处理源元素是一种不必要方式。
2、type属性
　　它给出媒体资源的类型，以帮助用户代理在获取该媒体资源之前确定它是否可以播放该媒体资源。如果指定，其值必须是有效的MIME类型。某些MIME类型定义的编解码器参数可能有必要指定资源的编码方式。[ rfc6381 ]
下面的列表展示了如何在type属性中使用编解码器的MIME参数：
H.264约束基线视频（主和扩展视频兼容）3级和MP4容器中的低复杂度AAC音频
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

H.264扩展视频（基线兼容）3级和MP4容器中的低复杂度AAC音频
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

在MP4容器中的H.264主配置文件视频级3和低复杂度AAC音频
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

H.264高配置视频（与主、基线或扩展配置文件不兼容）3级和MP4容器中的低复杂度AAC音频
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

在MP4容器中MPEG-4可视简单剖面0级视频和Low复杂度AAC音频
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>

MPEG-4先进的简单剖面0级视频和Low复杂度AAC音频在MP4容器中
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

在3GPP容器中的MPEG-4可视化简档0级视频和AMR音频
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>

Theora视频和Vorbis音频Ogg容器
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Theora视频和Speex音频Ogg容器
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>

Ogg Vorbis音频容器
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>

Speex音频单独ogg容器
<source src='audio.spx' type='audio/ogg; codecs=speex'>

FLAC音频OGG容器
<source src='audio.oga' type='audio/ogg; codecs=flac'>

Dirac视频和音频OGG Vorbis在容器
Dirac video and Vorbis audio in Ogg container
3、media属性
　　media属性给出媒体资源的预定媒体类型，以帮助用户代理在获取该媒体资源之前确实是否对该媒体资源有用，它的值必须是一个有效的媒体查询。
注意：
资源选择算法是这样定义的：当媒体属性被省略时，用户代理的行为与此值相同，即默认情况下，媒体资源适合所有媒体。如果<source>元素被插入作为一个媒体元素的子元素，而且这个媒体元素没有src属性，networkstate的值为NETWORK_EMPTY，用户代理必须调用媒体元素的资源选择算法。

<source>代码举例

如果作者不确定用户代理是否能够提供所提供的媒体资源，作者可以监听最后一个<source>元素上的error事件并触发回退行为：

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>
　　以上就是青锋建站给大家分享的使用JAVASCRIPT来操作<source>标签元素以及<source>标签元素的DOM接口的使用。青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。

转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/h5source.html