在JavaScript中添加HTML5视频源？ [英] Adding sources to HTML5 video in javascript?

问题描述

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

  var media; 
 function videotr（）{
 media = document.createElement（'video'）; 
 media.preload = true; 
 media.id ='it'; 
 document.getElementById（'crop'）。appendChild（媒体）
返回媒体; 
} 
 var div = document.getElementById（'crop'）; 
 $（div）.empty（）; 
 this.image = new videotr（）; 
 this.image.src = args.src; 
  

然而，我想要实现多个来源的兼容性。如何通过Java脚本添加多个来源？
我想以正确的方式执行此操作，而不是通过innerHtml。

解决方案

创建一个新的源元素并将其附加到视频元素：

  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（）; 
  

以下是小提琴。

I am running the following code for html5 video.

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.

解决方案

Create a new source element and append it to the video element:

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 fiddle for it.

这篇关于在JavaScript中添加HTML5视频源？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！