CODEWITHSUNDEEP
javascripthtml5-videovideo-processingvideo.js
Alex Jeffrey
Alex Jeffrey

Reputation: 523

Video.js - multiple mp4 videos on single page using Flash

I have a page with two MP4 videos on a single page which are not loading correctly. The first video will be playable, but the second video will just show a black screen. I've tried the fixes detailed in Multiple video.js players fail on flash fallback but they haven't worked.

I have changed the fallback order to use flash first, then html5, as firefox will not attempt to fall back to flash otherwise. I know it is the flash player causing the problem as if I leave the default order of html5 then flash, the player will work on chrome.

Here is a fiddle of what I'm experiencing: 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>

Thanks in advance

[edit] I have found a solution in the form of reencoding the video as OGG for firefox, but I won't accept this as my own answer unless there's no way to fix this issue with the flash fallback.

Upvotes: 3

Views: 3969

Answers (3)

anilCSE
anilCSE

Reputation: 2461

I found this. And its working fine for me. Add these below lines to your page

<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>

Upvotes: 1

aphax
aphax

Reputation: 2925

Try adding a unique 'id' attribute to each of the video tags. The docs say this is required, which makes sense since it's probably needed for the Flash and JS components to differentiate between the video elements when talking to each other

Upvotes: 0

adi rohan
adi rohan

Reputation: 806

You are trying to play an .mp4 video using HTML5 which is not supported atleast natively in firefox .

Look at the compatibility chart in here

Upvotes: 0

Related Questions