Question

使用以下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>

Answer 1

如果不查看包含多个视频的页面，很难确定。但听起来您可能不止一次在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
}

onPlay（或onClick？）在iPad上触发全屏视频

1 个答案: