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

使用下面的HTML和JavaScript，我一直在尝试在iPad上触发全屏视频。如果只有一个视频，这是可行的，但由于同一页面上有许多视频，因此只有第一个视频有效。我不知道如何将视频分开，以便它们都能正常工作。我试着换了身份证，但还是没用。任何建议都将不胜感激

HTML:

播放视频

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>

var video=document.getElementById（'test1'），
play=document.getElementById（'test2'），
时间
video.addEventListener（'webkitbeginfullscreen'，function（）{
play.innerText='播放视频'；
窗口。清除间隔（时间）；
});
video.addEventListener（'webkitendfullscreen'，function（）{
video.pause（）；
});
play.addEventListener（'touchstart'，function（））{
time=window.setInterval（函数（）{
试一试{
video.webkitEnterFullscreen（）；
}
捕获（e）{}
}, 250);
play.innerText='loading…'；
video.play（）；
});

如果不查看包含多个视频的页面，就很难确定。但听起来您可能不止一次地在HTML中使用了#test1和#test2 ID，在这种情况下

document.getElementById（'test1'）

将只返回页面上的第一个匹配元素。在这里查看正在进行的操作的结果：

尝试使用document.getElementsByTagName或document.getElementsByClassName并循环搜索结果，将事件侦听器添加到页面上的每个视频中。下面是一个例子：

var videos=document.getElementsByTagName（'video'），
播放按钮=document.getElementsByClassName（“播放按钮”），
时间
对于（var i=0；i

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

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
}