在Android設備上使用html5播放視頻

我正在構建移動網站，並且在Android設備上播放視頻時遇到問題。我可以播放視頻，但發現它不穩定。有時會導致瀏覽器崩潰，而其他時候控件無法響應。我的大部分測試都在Galaxy S3和Nexus上。在Android設備上使用html5播放視頻

該代碼是一個鏈接，您可以點擊播放視頻。

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

}

我不知道還有什麼在這裏調試。有任何想法嗎？

來源

2012-07-10 Tom

我會從一個靜態頁面開始，它裏面有一個靜態視頻標籤，看它是否正常播放。 – akonsu 2012-07-10 02:44:46

@akonsu試過，是的，它運行良好。 – Tom 2012-07-10 02:53:40

很酷，那麼我會在視頻中添加「canplay」事件偵聽器，並在那裏附加點擊偵聽器，以確保只有在視頻準備就緒後我才能點擊。 – akonsu 2012-07-10 02:55:00

感謝@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); 
    } 

}

來源

2012-07-10 14:20:15 Tom

在Android設備上使用html5播放視頻

回答

相關問題