gpt4 book ai didi

javascript - onPlay(或 onClick?)在 iPad 上触发全屏视频

转载 作者:行者123 更新时间:2023-11-28 22:20:55 24 4
gpt4 key购买 nike

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

关于javascript - onPlay(或 onClick?)在 iPad 上触发全屏视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20439564/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com