[英]onPlay (or onClick?) Trigger Full Screen Video on iPad
使用以下HTML和JavaScript,我一直試圖在iPad上觸發全屏視頻。 如果只有一個視頻,這可以工作,但由於同一頁面上有很多視頻,只有第一個視頻有效。 我不知道如何分離視頻,以便它們都能正常工作。 我已經嘗試過更改ID,但仍然無效。 任何建議將不勝感激!
HTML:
<video id="test1" width="100%" height="200px" poster="http://www.example.com/wp-content/uploads/2013/12/example.png">
<source src="http://video.example.com/example.mp4" type="video/mp4">
</video>
<button id="test2">Play Video</button>
JavaScript的:
<script type="text/javascript">
var video = document.getElementById('test1'),
play = document.getElementById('test2'),
time;
video.addEventListener('webkitbeginfullscreen', function() {
play.innerText = 'Play Video';
window.clearInterval(time);
});
video.addEventListener('webkitendfullscreen', function() {
video.pause();
});
play.addEventListener('touchstart', function() {
time = window.setInterval(function() {
try {
video.webkitEnterFullscreen();
}
catch(e) {}
}, 250);
play.innerText = 'loading ...';
video.play();
});
</script>
如果不查看包含多個視頻的頁面,很難確定。 但聽起來你可能不止一次在HTML中使用#test1和#test2 ID,在這種情況下, document.getElementById('test1')
只返回頁面上的第一個匹配元素。 看看這里有什么控制台的結果: http : //jsfiddle.net/tjnicolaides/q7Pyh/
嘗試使用document.getElementsByTagName或document.getElementsByClassName並循環遍歷結果,以將事件偵聽器添加到頁面上的每個視頻。 這是一個例子: http : //jsfiddle.net/tjnicolaides/NDYkU/
var videos = document.getElementsByTagName('video'),
play_buttons = document.getElementsByClassName('play_button'),
time;
for(var i=0; i< videos.length; i++) {
// add event listeners and stuff here
}
for(var i=0; i < play_buttons.length; i++) {
// add event listeners and stuff here
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.