防止在iPhone上加載HTML5視頻

Question

我想加載視頻以在臺式機和平板電腦上播放，但阻止加載到iPhone上，因爲它只是一個圖形元素。

這裏是我的代碼：

<video width="980" height="400" poster="/poster.jpg" autoplay loop> 
<source src="/images/front.mp4" type="video/mp4"> 
<source src="/images/front.webm" type="video/webm"> 
Your browser does not support the video tag. 
</video> 

我怎麼能告訴iPhone手機無法加載視頻，但只顯示海報框​​架？

謝謝。

Answer 1

像這樣的東西應該工作：

<script> 
var videoElement = document.getElementsByTagName("video")[0]; 

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { 
    videoElement.parentNode.removeChild(videoElement); 
    videoElement.pause(); 
} 
</script> 

這裏假設你只需要在頁面上一個video元素。

此外，請務必在關閉body元素之前放置JavaScript，或將其放入外部JavaScript文件中。