Question

我有一个动态加载的HTML5视频标签。这是我的HTML：

<video id="video" width="640" height="480" controls autoplay>
    <source id="source" src="" type="video/mp4">
</video>

以下是我加载视频的JavaScript：

function RunVideo(index) {
    var grid = document.getElementById("ctl00_ContentPlaceHolder1_gvPresentations");
    var cell = grid.rows[(+index) + 1].cells[2].innerHTML;
    var player = document.getElementById('video');
    var mp4Vid = document.getElementById('source');
    var movie = cell;

    player.pause();

    mp4Vid.setAttribute('src', movie);

    player.load();
    player.play();
}

我第一次加载视频（从网格视图）它工作正常。但是我试图加载的任何后续版本我都会在视频播放器中收到以下消息：

Error: Unsupported video type or invalid file path.

如何正确卸载当前视频以重新加载新视频？

修改

这似乎只是一个IE浏览器的错误。它确实可以在其他浏览器中使用，例如魅力。
能够在加载时单独播放每个视频（即如果之前没有设置其他src）。
然后链接和代码就可以了。
引发MEDIA12899: AUDIO/VIDEO: Unknown MIME type.错误。

Answer 1

修改：

在我使用this fiddle进行测试后，错误不会引发，所以我的假设是不正确的这使您无法选择重新编码视频。

原始回答：

在使用不同的codecs（非类型）设置源元素时，您似乎遇到了IE错误。
我认为浏览器会自动为codec分配type attribute参数，并且在设置新的src时不会更新它。

即使您的所有视频都封装在.mp4中，编解码器也可能会有所不同。

您可以找到IE支持here的编解码器列表。基本上，.webm，' H.264高调'和H.264 baseline profile。

如果我的假设是正确的，您可以尝试的一种可能的解决方法是每次调用source函数时创建一个新的RunVideo元素。

function RunVideo(index) {
    var grid = document.getElementById("ctl00_ContentPlaceHolder1_gvPresentations");
    var cell = grid.rows[(+index) + 1].cells[2].innerHTML;
    var player = document.getElementById('video');
    var oldMp4Vid = document.getElementById('source');
    var movie = cell;
    var newmp4Vid = document.createElement('source') 
    newMp4Vid.src = cell;
    player.removeChild(oldMp4Vid);
    player.appendChild(newMp4Vid);
    player.load();
    }

我不确定它是否能解决这个问题而且我不确定这些规范告诉我们如何在流上设置<source>新的src，但是如果这个问题只出现在IE中，那么可能是来自他们的错误，也许你可以fill a bug report。

或者，您可以使用完全相同的编解码器对视频进行重新编码。

在HTML5视频播放器中加载不同的视频

修改

1 个答案: