Video

[peterjunsworth]

I am playing around with HTML5 video and am trying to change the video source with an <a> link onclick event but alas I can't get the stream to come through.
This is what I have - do you know if this should be possible?

Code: Select all

<a href="javascript:void(0)" id="Gallery0" class="videoNavLink" onclick="swapVideos()">Cleo</a>

<video width="539" height="380" controls preload="false" id="videoPlayer">
     <source id="mp4Video" src="video/cleo_relaunch.mp4" type="video/mp4" />
     <source id="oggVideo" src="video/cleo_relaunch.ogg" type="video/ogg" />
</video>

<script type="text/javascript">
     function swapVideos(){
          var videoPlayer = document.getElementById("videoPlayer");
          videoPlayer.pause();
               
          var mp4Video = document.getElementById("mp4Video");
          mp4Video.src = "http://localhost/osi/video/nzru.mp4"
               
          var oggVideo = document.getElementById("oggVideo");
          oggVideo.src = "http://localhost/osi/video/nzru.ogg"
               
          videoPlayer.load();
     }
</script>

I have tried it with both a relative src URL and an absolute URL to no avail - I just get the video player with a cross in the centre to indicate no stream present.

[peterjunsworth]

Just adding - I want to do this without a page refresh if possible

[peterjunsworth]

I found this article suggesting I need to recreate the entrie video element.

http://blog.mediabymrb.com/2011/02/javascript-html5-video/

Thoughts?

[zcorpan]

The above should certainly work. I'm pretty certain it works fine in Opera. Which browser does it not work?

[peterjunsworth]

My original post - I couldn't get it working in firefox or IE.
The code from the URL I posted works but I have come up against a roadblock with IE.

Basically, what I am doing is removing then recreating the Video element and Objects etc. when a list item is clicked.

Here is the code:

Code: Select all

function swapVideos(videoString){
            
   // Remove Old Video            
   var x = document.getElementById('vid');
   document.getElementById('video').removeChild(x);
   
   // Create Elements for New Video
   var v = document.createElement('video');
   var mp4 = document.createElement('source');
   var webm = document.createElement('source');
   var ogv = document.createElement('source');
   
    //Flash video elements
   var f = document.createElement('object');
   var p1 = document.createElement('param');
   var p2 = document.createElement('param');
   var p3 = document.createElement('param');
   var em = document.createElement('embed');
   
   // Populate New Elements
   v.setAttribute('id','vid'); v.setAttribute('width','539'); v.setAttribute('height','432'); v.setAttribute('controls',true);
   mp4.setAttribute('id','mp4'); mp4.setAttribute('src','video/' + videoString + '.mp4'); mp4.setAttribute('type','video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
   webm.setAttribute('id','webm'); webm.setAttribute('src','video/' + videoString + '.webm'); webm.setAttribute('type','video/webm; codecs="vp8, vorbis"');
   ogv.setAttribute('id','ogv'); ogv.setAttribute('src','video/' + videoString + '.ogg'); ogv.setAttribute('type','video/ogg; codecs="theora, vorbis"');
   
    //set Flash attributes
   f.setAttribute('id','player1'); f.setAttribute('classid','clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'); f.setAttribute('width','539'); f.setAttribute('height','462');
   p1.setAttribute('name','movie'); p1.setAttribute('value','video/flashVideoPlayer.swf');
   p2.setAttribute('name','allowscriptaccess'); p2.setAttribute('value','always');
   p3.setAttribute('name','flashvars'); p3.setAttribute('value','video=' + videoString);
               
   em.setAttribute('id','player1'); em.setAttribute('width','539'); em.setAttribute('height','462'); em.setAttribute('src','video/flashVideoPlayer.swf'); em.setAttribute('flashvars','video=' + videoString); em.setAttribute('allowscriptaccess','always');
               
   // Append New Elements
   f.appendChild(p1); f.appendChild(p2); f.appendChild(p3); f.appendChild(em);
   v.appendChild(mp4); v.appendChild(webm); v.appendChild(ogv); v.appendChild(f);
   document.getElementById('video').appendChild(v);
               
   return true;
}

In IE7 - I am receiving an invalid arguement error.
As IE (up to version 9 anyway), will default to the Flash player I have been focusing on that with the error but I think it may have something to do with IE not liking appendChild();

Any ideas?

Thanks

[peterjunsworth]

I was attempting to appendthe embed element to the object element - this is in fact incorrect as they are seperate.

Different browsers use different means of embedding flash content whether it the object element or straight embedding.

I changed the below from:

f.appendChild(em);

to

v.appendChild(em);

and now we are happy.

I am still interested to hear if anyone gets a simpler version working, ie. just change the src text directly.

Thanks

[zcorpan]

I don't think you need the object element at all, just the embed element should do.

Just changing src should work, I guess the browsers you're testing are still buggy in their <video> implementations. (Have you tested Opera or Firefox 4?)

[peterjunsworth]

Hi,

Not yet - just old browsers to test compatibility.
Have it working but not 100% confident it will always work.
IPad works OK but occasionally doesn't want to play 2nd video.

Can see here:

http://onscreenink.com/video.php

[Mbravo]

Its wonderful discussion great learning for me,thanks all.