在 javascript 中向 HTML5 视频添加源？

Posted 2023-05-08

【中文标题】在 javascript 中向 HTML5 视频添加源？

【英文标题】：Adding sources to HTML5 video in javascript?

【发布时间】：2011-11-03 18:15:08

【问题描述】：

我正在为 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;

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

【参考方案1】：

创建一个新的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();

这是一个fiddle。

【讨论】：

谢谢伙计！你不仅回答了我的问题，还向我展示了小提琴，太棒了！我仍然认为他们应该有一个 video.source.1 类型的交易，以便它可以更加精简，但我想这与标准 html 略有不同。