CODEWITHSUNDEEP
video.js
Martijn
Martijn

Reputation: 1

Video.js issue with Safari and IE

I'm using video.js and I have a page with one video area that has to be changed when clicking certain thumbnails. For this, I use the following code:

<video id="div_video" class="video-js vjs-default-skin" controls preload="none" width="560" height="315" poster="<?=ROOT?>media/videos/testvid_01.jpg" data-setup="{}">
    <source id="video_mp4" src="<?=ROOT?>media/videos/testvid_01.mp4" type="video/mp4" />
    <source id="video_ogg" src="<?=ROOT?>media/videos/testvid_01.ogv" type="video/ogg" />
    <source id="video_webm" src="<?=ROOT?>media/videos/testvid_01.webm" type="video/webm" />
</video>

The thumbnails are normal links with the "thumbnail" class. To change the video, I use the following code:

$(function () {
  $('.thumbnail').click(function () {
    var $target = 'testvid_' + $(this).attr('id');
    var $content_path = '<?=ROOT?>media/videos/';
    var $vid_obj = _V_('div_video');

    $('img.vjs-poster').hide();

    $vid_obj.ready(function () {
      $vid_obj.pause();
      $('video:nth-child(1)').attr('src', $content_path + $target + '.mp4');
      $('video:nth-child(1)').attr('src', $content_path + $target + '.ogv');
      $('video:nth-child(1)').attr('src', $content_path + $target + '.webm');
      $('img.vjs-poster')
        .attr('src', $content_path + $target + '.jpg')
        .show();
      $('.vjs-big-play-button').show();
      $('#div_video').removeClass('vjs-playing').addClass('vjs-paused');
      $vid_obj.load();
      $vid_obj.play();
    });
  });

  $('#01').click();
});

The ROOT is the full domain name here.

Now, this works perfectly in Firefox and Chrome. The video starts playing automatically and when clicking one of the thumbnails, it changes to a different video. Perfect!

However, it does not work in Safari (5.1.7) and IE (9). In Safari it just keeps showing the loading icon infinitely and in IE it does not start at all.

When I remove the \$("#01").click();, the first video (which is there by default) does work, however when clicking any thumbnails, it just keeps showing the loading icon again.

On IE, it does not start playing at all. When using compatibility mode, it starts playing but only plays the sound.

Anyone know what's wrong here? Thanks!

Upvotes: 0

Views: 2483

Answers (1)

Maria Diaz
Maria Diaz

Reputation: 11

Try this:

<script type='text/javascript'>
    //<![CDATA[ 
    $(function () {
        $(".thumbnail").click(function () {
            var $target = "testvid_" + $(this).attr("id");
            var $content_path = "<?=ROOT?>media/videos/";
            var $vid_obj = _V_("div_video");

            $("img.vjs-poster").hide();

            $vid_obj.ready(function () {
                $vid_obj.pause();
                $("video:nth-child(1)").attr("src", $content_path + $target + ".mp4");
                $("video:nth-child(1)").attr("src", $content_path + $target + ".ogv");
                $("video:nth-child(1)").attr("src", $content_path + $target + ".webm");
                $("img.vjs-poster").attr("src", $content_path + $target + ".jpg").show();
                $(".vjs-big-play-button").show();
                $("#div_video").removeClass("vjs-playing").addClass("vjs-paused");
                $vid_obj.load();
                $vid_obj.play();
            });
        });

        $(".thumbnail[id='01']").click();
    });
    //]]>
</script>

This works for me.

Upvotes: 1

Related Questions