Odd Safari Video "Load" Behavior

Question

I wrote a simple video player for one page of my site that works by clicking buttons to change the src attribute of the source tags, then calling a load on the player element. The video element looks like this:

<video id="player" title="Video 1" controls  width="600" height="480" preload="metadata">
    <source src="videos/english.mp4" type="video/mp4" />
    <source src="videos/english.webm" type="video/webm" />
    <source src="videos/english.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="plugins/flash/player.swf" width="600" height="480">
        <param name="movie" value="plugins/flash/player.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="allowscriptaccess" value="always" />
        <param name="flashvars" value="file=../../videos/english.mp4" />
        <p>Your browser can't play HTML5 video. <a href="videos/english.webm">Download it</a> instead.</p>
    </object>
</video>

And the script relevant to the click event looks like this:

$(".playerControl").live("click tap",function(){

    // If the player isn't playing this divs video

    if($("#player").data('currentVideo') != $(this).data('videoID')){

        // Swap active button states

        $(".playerControl.active").removeClass('active');
        $(this).addClass('active');

        // Pause the current video and swap the content, then load the player

        $("#player")[0].pause();
        $("#player").html($(this).data('innerHTML'));
        $("#player").data({
            innerHTML: $(this).data('innerHTML'),
            currentVideo: $(this).data('videoID')
        });
        $("#player")[0].load();
        updateBackup();

    }       
});

This works perfectly fine on Chrome and presumably Firefox, but the oddest issue comes up when I use this on Safari. The first video will show up, but every second video I attempt to play does not even try to load. Calling load on the player from the console does not yield results either, but an inspection of the player shows that its sources are correct, and the video will play if I manage to click it after a video that isn't working.

I do hope that doesn't sound too confusing, basically safari doesn't load every other video I try to play, but has no trouble playing any of the files on their own. I have a feeling there is some extra function that I have to call to get it to work, but I am not sure.

Update: I rewrote the click event to execute regardless of which button is clicked, and it is an issue with loading the video every other click, not with the video itself.

Update 2: I tried adding a couple lines that cleared the video html and loaded before inserting the new html, to initialize it, and that caused it to start loading about two-thirds of the time.

Inferpse Inferpse · Accepted Answer · 2012-10-07T10:38:19

You can try to wrap <video> tag in a block and rewrite its innerHTML.

Something like this:

<div id="player-holder">
    <video id="player">...</video>
</div>

// rebuild player data and reload HTML.
$("#player").html($(this).data('innerHTML'));
$('#player-holder').html($('#player-holder').html())

This will rebuild <video> element and might help with problem in Safari.

Odd Safari Video "Load" Behavior

1 Answers