Javascript – Reload Source of html5 video tag doesn’t work on chrome

google-chromehtmlhtml5-videojavascript

on an website I have a simple video player tag and a list of videos. Onclick to an element of the videolist I change the poster and src attribute of the video tag an den src and type of the source-tag inside the video tag.
This all works fine in FF and IE but it don't works in chrome.

VideoTag

<video id='video' class='video-js vjs-default-skin' controls preload='none' width='640' height='320' poster='./poster/dummy.png' data-setup='{}' preload='none'>
    <source src='./video/BeHappyToBeAlive.mp4' type='video/mp4'>
    <track kind='captions' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind='subtitles' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 -->
    Your Browser does not support video tag. Please update your Browser.
</video>

JavaScript

$(document).ready(function(){

var videoChanging = false;

function changeVideo(videoTag) {

    var video = videoTag.children().first();
    var src = video.children('source');
    var title = video.parent().find('h3').html();
    var description = video.parent().find('p').html();
    var poster = video.attr('poster');
    var source = video.children().first().attr('src');
    var mainVideo = $('#video_html5_api');
    var mainVideoBox = $('#video');
    mainVideo.children('source').remove();
    mainVideo.prepend(src.clone());
    mainVideo.attr('poster', poster);
    mainVideo.attr('src', source);
    mainVideoBox.parent().find('h3').html(title);
    mainVideoBox.parent().find('p').html(description);
    document.getElementById('video_html5_api').load();
    videoChanging = false;
    setTimeout(function(){
        document.getElementById('video_html5_api').play();
    }, 200);
}

$('.videoListItemBox > a ').on('click', function () {

    if( videoChanging ){
        return;
    }

    document.getElementById('video_html5_api').pause();
    var video = $(this);
    videoChanging = true;
    var changeMovieCallback = function(){ changeVideo( video ); }
    var t = setTimeout(changeMovieCallback, 200);

});

});

When I add an alert to the beginn of the changeVideo(videoTag) function it will works fine in chrome.
Can somebody explain my why and give me a solution to fix this problem?

Best Answer

It might be the preload='none' property on your video element. But it is hard to tell - your sample is too complex. How about something simple?

<video id='video' controls width='640' height='320'>
    Your Browser does not support video tag. Please update your Browser.
</video>

<div class= "videoListItemBox">
  <a href="#" data-src="http://html5demos.com/assets/dizzy.mp4" 
    data-poster="http://lorempixel.com/640/320/">video 1</a>
  <a href="#" data-src="http://techslides.com/demos/sample-videos/small.mp4" 
    data-poster="http://lorempixel.com/640/320/">video 2</a>
<div>

code:

$(function(){
  $('.videoListItemBox > a ').on('click', function (e) {
    var link = $(this);
    $('#video')
        .attr('poster', link.data('poster'))
        .attr('src', link.data('src'))
        .get(0).play();
    e.preventDefault(); 
  });
});

See this jsbin: http://jsbin.com/bamafaki/2/edit

Do note that *.mp4 files are not supported on all browsers, so you should expand your code to include *.webm files as a fallback.

Related Topic