gpt4 book ai didi

javascript - 根据屏幕大小播放/暂停 HTML5 视频

转载 作者:行者123 更新时间:2023-11-28 00:38:11 25 4
gpt4 key购买 nike

我想根据屏幕尺寸播放/暂停视频,例如,我希望视频在桌面上自动播放,但在平板电脑及以下设备上暂停。这是我迄今为止一直在使用的 Javascript。

标记:

    <video id="cdev-video-selector" class="cdev-video-controls" autoplay controls loop>
<source src="samplesource">
</video>

JS:

$('#cdev-video-selector') {
if ($(window).width() < 960) {
$('#cdev-video-selector').pause();
} else {
$('#cdev-video-selector').play();
}
});

最佳答案

如果您打算根据窗口大小触发 JS 的 .play(),请删除 autoplay:

<video id="cdev-video-selector" controls loop>

您需要将调整大小定位在 window 对象上: jsBin demo

jQuery:

var $vid = $("#cdev-video-selector");
function videoHandler(){
$vid[0][ $(window).width()<960 ? "pause" : "play" ]();
}
$(window).on("resize load", videoHandler);

Plain JS jsBin demo:

var videoSel = document.getElementById("cdev-video-selector");

function videoHandler(){
if(window.innerWidth < 960){
videoSel.pause();
}else{
videoSel.play();
}
}

window.addEventListener("resize", videoHandler, false);
window.addEventListener("load", videoHandler, false);

如果您喜欢,您还可以将上述函数“简化”为: demo

var videoSel = document.getElementById("cdev-video-selector");
function videoHandler(){
videoSel[window.innerWidth<960?"pause":"play"]();
}
videoHandler();
window.addEventListener("resize", videoHandler, false);

关于javascript - 根据屏幕大小播放/暂停 HTML5 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28240621/

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