Javascript添加2个视频源答案

【问题标题】：Javascript adding 2 video sourcesJavascript添加2个视频源
【发布时间】：2013-02-23 14:10:38
【问题描述】：

您好，我对 javascript 很陌生。我有一个 .webm 和 .mp4 视频源，但是如何在 javascript 中添加另一个源，我只设法放入 1 (webm)，我需要添加另一个源的代码是什么？

提前谢谢你。

嗨，我之所以需要放入 JS 是因为 divx 插件正在替换 html5 视频元素，就像在这个线程上Prevent divx web plugin fron replacing html5 video element?

这是我的代码

<script type="text/javascript">
function changevid() {
    document.getElementById('vid').innerHTML = '<source src="http://avalonplay.com/video/loginvideo.webm" type="video/webm" />';
   document.getElementById('vid').load();
}
</script>

<body onload="changevid()">

   <video id="vid" width="800" height="450" loop="loop" preload="auto" autoplay style="width: 100%; height: auto; margin:0; right: 0;">    
   </video>

</body>

【问题讨论】：

标签： javascript html video mp4 webm

【解决方案1】：

我建议你只添加你需要的那个。

例如：

function changevid() {
   var vid = document.getElementById('vid');

   if (vid.canPlayType('video/mp4') != '') {
      vid.src = 'http://avalonplay.com/video/loginvideo.mp4';
   }
   else if (vid.canPlayType('video/webm') != '') {
      vid.src = 'http://avalonplay.com/video/loginvideo.webm';
   }
   vid.load();
}

【讨论】：

【解决方案2】：

您可以使用.appendChild() 代替.innerHTML

但更好的解决方案是测试浏览器支持，然后只添加支持的视频类型：

window.onload = function(){

    var vid = document.getElementById('vid');
    var source = document.createElement('source');
    var supported = supportedVidType();

    source.src = 'http://avalonplay.com/video/loginvideo'+supported.src
    source.type = supported.type

    vid.appendChild( source );

}

var supportedVidType = function(){
    var vidTest = document.createElement( "video" )

    var types = {}

    if ( vidTest.canPlayType ) {
        // Check for MPEG-4 support
        types.mp4 = "" !== vidTest.canPlayType( 'video/mp4; codecs="mp4v.20.8"' )

        // Check for Webm support
        types.webm = "" !== vidTest.canPlayType( 'video/webm; codecs="vp8, vorbis"' );

        // Check for Ogg support
        types.ogg = "" !== vidTest.canPlayType( 'video/ogg; codecs="theora"' );
    }

    for( type in types ){
        if(types[type]) {
            return {
                type: 'video/'+type,
                src: '.'+type
            }
        } 
    }
}

这是一个 jsfiddle：http://jsfiddle.net/2gd3m/2/

【讨论】：

【解决方案3】：

video 标签支持多种来源：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

来自：http://www.w3schools.com/tags/tag_video.asp

【讨论】：

嗨，我之所以需要放入JS是因为divx插件正在替换html5视频元素，就像在这个线程stackoverflow.com/questions/4745626/…
mhhhhh.. 正是因为你宽容的程序员，divx 人赢了..！！！！真丢人！！！！！！！