我想根据屏幕尺寸播放/暂停视频,例如,我希望视频在台式机上自动播放,但在平板电脑及以下版本上暂停。这是到目前为止我一直在使用的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();
}
});
autoplay
如果您打算.play()
根据窗口大小触发JS,请删除:
<video id="cdev-video-selector" controls loop>
您需要针对对象调整大小window
:jsBin演示
jQuery的:
var $vid = $("#cdev-video-selector");
function videoHandler(){
$vid[0][ $(window).width()<960 ? "pause" : "play" ]();
}
$(window).on("resize load", videoHandler);
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);
如果喜欢,还可以将上述功能“简化”为:演示
var videoSel = document.getElementById("cdev-video-selector");
function videoHandler(){
videoSel[window.innerWidth<960?"pause":"play"]();
}
videoHandler();
window.addEventListener("resize", videoHandler, false);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句