在安卓设备上使用HTML5播放视频

Question

我正在创建一个移动网站，但在Android设备上播放视频时遇到了麻烦。虽然我可以让视频播放，但发现它不稳定。有时会导致浏览器崩溃，其他时候控件无响应。我主要在Galaxy S3和Nexus上进行测试。

代码是一个链接，您可以单击它来播放视频。

<div id="player"></div>
<a href="#" onclick="DoNav('<?php echo $url; ?>');" title="Click to play video"> <?php echo $result_videos[$i]["camera_name"]; ?> </a>

JavaScript / jQuery 混合使用（不太优化，可能是问题所在）：

function DoNav(theUrl)
{

// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
    var mydiv = $("#player");
        var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
           mydiv.append(myvideo);
} else {
   $('#myfileplayer').attr("src",theUrl); 
}

var video = document.getElementById('myfileplayer');
video.addEventListener('click',function(){
  video.play();
},false);

} 

我不确定还有什么需要调试的。有什么想法吗？

- Tom

---

我会从一个静态页面开始，其中包含一个静态的视频标签，并查看它是否可以正常播放。 - akonsu

@akonsu 试过了，没问题，能正常播放。 - Tom

很酷，然后我会在视频上添加“canplay”事件监听器，然后我会附加点击监听器以确保只有在视频准备好时才能点击。 - akonsu

为什么需要点击事件监听器？您已经在视频标签上拥有控件，足以播放电影。 - akonsu

@akonsu 不确定我是否熟悉 "canplay" - 你能详细说明或提供链接吗？我想我没有正确地使用谷歌搜索。 - Tom

请参见例如 http://www.html5rocks.com/en/tutorials/video/basics/（第 5.2 节）。 - akonsu

Answer 1

感谢@akonsu提到为什么我需要点击事件监听器？很好的观点，我不需要它。我将其删除后，所有奇怪的行为都消失了。

function DoNav(theUrl)
{

  // only add the player if it doesn't yet exist
  if($('#myfileplayer').length == 0) {
    var mydiv = $("#player");
    var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
       mydiv.append(myvideo);
  } else {
     $('#myfileplayer').attr("src",theUrl); 
  }

} 

- Tom