奇Safari浏览器视频“装载”行为

我写了一个简单的视频播放器为我的网站的一个页面点击按钮来更改源代码的src属性，然后调用播放器元素上的负载工作。视频元素看起来是这样的：奇Safari浏览器视频“装载”行为

<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>

和脚本relavent点击事件是这样的：

$(".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(); 

     }  
    });

这适用于Chrome和大概的Firefox完全正常，但最奇怪的问题出现在当我在Safari上使用它。第一个视频将显示，但我尝试播放的每一秒视频都不会尝试加载。调用从控制台不会产生任何结果，但球员的检查玩家“装载”显示，其消息来源是正确的，如果我管理的是心不是工作的视频后，点击该视频将发挥。

我希望听起来不是很混乱，基本上Safari不加载所有其他视频我尝试播放，但没有无法播放任何文件的自己。我有一种感觉，有一些额外的功能，我不得不打电话来让它工作，但我不确定。

更新：我重写了click事件执行不管按钮被点击其中的，它是与加载视频每隔点击，而不是影片本身的问题。

更新2：我尝试添加一些行以清除视频html，并在插入新html之前加载，初始化它，并导致它开始加载〜2/3rds的时间。

来源

2012-01-03 JProffitt

忘记关闭对象 – noob 2012-01-03 22:40:46

Woops，复制/粘贴错误，固定以反映源（仍然不能正常工作）。 – JProffitt 2012-01-03 22:43:16

你可以尝试换<video>标签中块和重写它的innerHTML。

事情是这样的：

<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())

这将重建<video>元素，可能与Safari中的问题提供帮助。

来源

2012-10-07 10:38:19 Inferpse

我最终实现的解决方案是放弃标签，并使用“canPlayType（type）”以正确的格式作为src直接加载。看来标签还没有完全支持。 – JProffitt 2012-11-23 07:45:04

我从未接受过您的答案 - 原则上它是有效的。 – JProffitt 2013-01-02 20:17:06

你可以添加你自己的答案也;）看来你的答案这个问题是Safari浏览器更准确。 – Inferpse 2013-01-07 13:09:45

奇Safari浏览器视频“装载”行为

回答

相关问题