Question

我的网页上有两个MP4视频，这些视频无法正确加载。第一个视频将可播放，但第二个视频将显示黑屏。我已经尝试了Multiple video.js players fail on flash fallback中详述的修复程序，但它们没有用。

我已将更改后备顺序更改为先使用flash，然后再使用html5，因为firefox不会尝试重新使用flash。我知道这是导致问题的flash播放器，好像我保留了html5的默认顺序然后闪存，播放器将使用chrome。

这是我正在经历的一个小提琴： http://jsfiddle.net/jSp8Z/

<script src="//vjs.zencdn.net/c/video.js"></script>
<link rel="stylesheet" href="//vjs.zencdn.net/c/video-js.css">

<video class="video-js vjs-default-skin" controls width="320" height="459" poster="" data-setup='{"techOrder":["flash","html5","links"]}'>
<source src="http://images.pitchero.com/up/2013-01-08-iphone-af.mp4" type="video/mp4">
</video>
<video class="video-js vjs-default-skin" controls width="320" height="459" poster="" data-setup='{"techOrder":["flash","html5","links"]}'>
<source src="http://images.pitchero.com/up/2013-01-08-iphone-matchday.mp4" type="video/mp4">
</video>

提前致谢

[编辑] 我找到了一个解决方案，将视频重新编码为firefox的OGG，但我不会接受这个作为我自己的答案，除非没有办法解决这个问题与闪回后退。

Answer 1

我找到了这个。它对我来说很好。将以下这些行添加到您的页面

<script>
var myVideo = _V_("example_video_1"); // get my videojs.  
function onComplete(){  
    var myVideo1 = document.getElementsByTagName('video')[0]; // get my <video> tag.  
    var videoPlaying = myVideo1.currentSrc; // get the file being played  
    var ext = videoPlaying.substr(videoPlaying.lastIndexOf(".")); // figure the correct extension  
    myVideo1.src = 'video/eu'+ext; // set up the new src  
    myVideo.load(); // load the new video  
    myVideo.play(); // play the new video  
    myVideo.removeEvent("ended", onComplete); // remove the listener  
};  
myVideo.addEvent("ended", onComplete); // listener handler  
</script>

Answer 2

您正在尝试使用HTML5播放.mp4视频，这在Firefox中至少不支持。

查看here

中的兼容性图表

Answer 3

尝试为每个视频标记添加唯一的“id”属性。文档说这是必需的，这是有道理的，因为Flash和JS组件可能需要在彼此交谈时区分视频元素

Video.js - 使用Flash在单页上播放多个mp4视频

3 个答案: