在 javascript 中将源添加到 HTML5 视频?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7192098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 01:16:52  来源:igfitidea点击:

Adding sources to HTML5 video in javascript?

javascripthtmlhtml5-video

提问by Confused_Coder

I am running the following code for html5 video.

我正在为 html5 视频运行以下代码。

var media;
function videotr(){
  media = document.createElement('video');
  media.preload = true;
  media.id = 'it'; 
  document.getElementById('crop').appendChild(media)
  return media;
}                
var div = document.getElementById('crop');
$(div).empty();
this.image = new videotr();
this.image.src = args.src;

However, I would like to implement multiple sources for compatibility. How can add in multiple sources through java script? I want to do this the right way, not through innerHtml.

但是,我想实现多个来源的兼容性。如何通过java脚本添加多个源?我想以正确的方式做到这一点,而不是通过innerHtml。

回答by Matthew

Create a new sourceelement and append it to the videoelement:

创建一个新source元素并将其附加到video元素:

function addSourceToVideo(element, src, type) {
    var source = document.createElement('source');

    source.src = src;
    source.type = type;

    element.appendChild(source);
}

var video = document.createElement('video');

document.body.appendChild(video);

addSourceToVideo(video, 'http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv', 'video/ogg');

video.play();

Here's a fiddlefor it.

这是一个小提琴