HTML会在全屏事件中更改视频源,而无需重新启动视频

时间:2014-10-20 06:48:33

标签: javascript jquery html5 video html5-video

有没有办法在全屏事件中更改视频源但仍在同一时间播放?当我更改src属性时,视频从头开始,我不希望这样。

$(document).ready(function () {

//fix for Firefox adding event listener for -mozfullscreenchange - on body
//on a DOM element it won't work
$(this).on('mozfullscreenchange', function(){//stuff});

var ok = false;

function updateVideo(_currentTime) {

  if ($('#myVideo').get(0).duration) {
      if(_currentTime !== undefined ) {
          document.getElementById('myVideo').currentTime = _currentTime;
      } else {
          document.getElementById('myVideo').currentTime = (window.scrollY / ($(document).height() - $(window).height())) * $('#myVideo').get(0).duration;
      }
  } else {
      document.getElementById('myVideo').currentTime = _currentTime;
  }
}

$(window).scroll(updateVideo);

$('#myVideo').on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';
    ok = false;

    if (event == 'FullscreenOn') {
        $('#myVideo').attr('src', 'url1');
        setTimeout(function () {
          updateVideo(parseFloat($('#myVideo').get(0).currentTime.toFixed(2)))
        }, 1000);


    } else {
        $('#myVideo').attr('src', 'url2');
          setTimeout(function () {
            updateVideo(parseFloat($('#myVideo').get(0).currentTime.toFixed(2)))
          }, 500);
    }
});

$('#myVideo').on('loadmetadata', function () {
   updateVideo();
});

});

仍然无法正常工作。有什么想法吗?

0 个答案:

没有答案