javascript - jquery 获取 <video> 标签的子元素

Question

我正在努力改变 src <source> 上的属性我的元素 <video>元素。

原始标记

<video id='myVidID' class='video-js vjs-default-skin' controls autoplay preload='auto' width='1280' height='720' poster='poster.jpg' data-setup='{}'>

<source src='uploads/video/static/vid1.mp4' type='video/mp4'>
<source src='uploads/video/static/vid1.webm' type='video/webm'>

Whoops. Your browser does not Support HTML5 or Flash. Please upgrade your browser.

</video>

我想:

获取视频容器(元素)，然后引用child1，再引用child2(0,1)。

我的代码似乎更改了添加的运行时 src <video> 中的属性标记 ( <video src='' ) 而不是两个子源标记的 src属性。

附言我的脚本运行了，并且确实改变了 src视频标签中的属性(这不是预期的更改)。

<script type="text/javascript">

var myVideo = videojs("myVidID");

function onComplete(){
var child = $('#myVidID').children();
child[0].src = 'uploads/video/demovid-01-02-2014.mp4';
child[1].src = 'uploads/video/demovid-01-02-2014.webm';

myVideo.load();
myVideo.play();
myVideo.off('ended', onComplete);
};

myVideo.on('ended', onComplete);

</script>

Answer 1

由于您使用的是 video.js ，您最好使用其 API 来设置新源。这样，如果必须使用 Flash 回退，它也可以工作。

myPlayer.src([
  { type: "video/mp4", src: "uploads/video/demovid-01-02-2014.mp4" },
  { type: "video/webm", src: "uploads/video/demovid-01-02-2014.webm" }
]);

https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#src-source-