Html5 changing video fail in Safari

Question

I included a videos with html5, and I have a menu that change the video.

The menu runs well in Firefox, Opera and Chrome but not in Safari.

I have this html code:

<div id="tele">
    <video id="v" width="254" height="204">
     <source id="ogg" src="/media/joies.ogv" type="video/ogg" /> 
     <source id="mp4" src="/media/joies.mp4" type="video/mp4" />
     <source id="webm" src="/media/joies.webm" type="video/webm" /> 
     <object id="flash" type="application/x-shockwave-flash"
        data="player.swf?file=joies.mp4">
        <param id="flash2" name="movie" value="player.swf?file=joies.mp4" />
    </object> </video>


</div>

<li><a href="#" class="activo"
onClick="changeVideo('/media/joies.ogv','/media/joies.mp4','/media/joies.webm','player.swf?file=joies.mp4','player.swf?file=joies.mp4')">1</a>

And this Javascript:

function changeVideo(v,x,w,y,z) {

    document.getElementById("ogg").src=v;
    document.getElementById("mp4").src=x;
    document.getElementById("flash").data=y;
    document.getElementById("flash2").value=z;
    document.getElementById("webm").src=w;
    var video = document.getElementById('v');
    video.load();
    video.play();
    }

To visit the web: http://81.35.152.41:8888/index.php/ca/static/zapping#

Why the menu to change video not runs in Safari?

Thanks

Regards

Answer 1

If you change a video's source after it has already loaded, safari will not load the video. You must Clone the video, delete the original and append the cloned container in its place.

Answer 2

put the mp4-node on top of the others, then it might work. if that does not work, remove the source-nodes completely and use the src attribute of the video-node. Then add a check for compatible codecs to changeVideo() --> video.canPlayType("video/mp4") (for each type, best in a loop)

in IE9 that fixed problems for me. tested Safari later so dunno if it has the same problem.

I use this function for source-testing:

    var VIDEO = document.getElementById("myVideo");
        function listSource(source,sources) {
            var type,
                ext = source.split('.').pop();
            switch(ext) {
                case "mp4":
                case "m4v": 
                    ext = "mp4";
                    type = "video/mp4";
                break;
                case "webm":
                    type = "video/webm";
                break;
                case "ogv":
                    type = "video/ogg";
                break;
                default:
                    console.log('invalid file extension: '+source);
                    return sources;
            }
            if( !VIDEO.canPlayType(type) ) {
                return sources; // only add video to list if the current browser can actually play it
            }
            sources.push({ src: source, type: type });
            return sources;
        }


    var sources_ok = [];
    var sources = ["http://domain.com/test.mp4", "http://domain.com/test.webm", "http://domain.com/test.ogv"]; // example

    for(var i=0,maxi=sources.length;i<maxi;i++) {
        sources_ok = listSource(sources[i],sources_ok);
    }