chrome 视频 src 更改不起作用答案

【问题标题】：chrome video src change not workingchrome 视频 src 更改不起作用
【发布时间】：2013-06-25 00:03:34
【问题描述】：

我使用以下代码在视频结束后更改视频src 属性。

我预加载了第二个视频，我将 src 更改为链接到第二个视频。

在 IE 和 Firefox 中可以完美运行但在 Chome 27.X.X 中 video 元素更改 src 后似乎死了。

奇怪的是...如果我使用断点单步执行 .ended 函数中的代码，它可以正常工作！

HTML

<video id="vid1" preload="auto" width="640" height="480" src="/Trans/video/sleigh60.mp4" controls>
</video>

<div style="display:none">
    <video id="vid2" src="/Trans/video/sleighRest.mp4" preload="auto">
    </video>
</div>

JavaScript

<script type="text/javascript">
    var vid2Source = '/Trans/video/sleighRest.mp4';
    var video = document.getElementById('vid1');

    video.addEventListener("ended", function() {
        video.src = vid2Source;
        video.load();
        video.play();
    });
</script>

感谢您的帮助。

【问题讨论】：

您是否有任何类型的负载处理程序来运行您的 javascript？您的代码可能在 DOM 完全加载之前运行。如果您将断点放在第一行，那将延迟您的代码足够长的时间以完成加载 DOM。
我的意思是在addEventListener 函数中放置一个断点。将整个内容放入 window.onload 不会改变任何内容。
是的，如果您的事件侦听器被调用，则必须加载 DOM，否则它将无法找到 vid1 元素。这是我的第一个想法，抱歉没有帮助。
不知道为什么你会看到这种行为，但这里有另一个想法：为什么不在事件处理程序的第一个视频上设置display:none，然后再显示第二个？
我也想过这个问题，但是由于 HTML5 规范中提到了将 src 更改为 right thing，因此这样做可能会在以后在移动设备上为我节省一些麻烦。

标签： javascript html google-chrome html5-video

【解决方案1】：

我在 Chrome 中使用以下代码遇到了同样的问题。

我以前的 HTML：

<video  preload="auto" controls controlsList="nodownload" width="900">
    <source id="vidSrc"  type="video/mp4" />
</video>

我之前的 javascript 是：

jQuery('#vidSrc').attr('src','http://techslides.com/demos/sample-videos/small.mp4');

我正在更新 src 属性，但没有加载视频。所以我已经从视频中删除了源元素，并且源被附加并且运行良好。

更新的 HTML

<video id="vidSrc"  preload="auto" controls controlsList="nodownload" width="900">
</video>

更新的js：

jQuery('#vidSrc').html('<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />');

【讨论】：