Play/Pause HTML5 视频在屏幕上的大小

Play/Pause HTML5 Video on screen size

我想 play/pause 基于屏幕尺寸的视频,例如,我希望视频在桌面上自动播放,但在平板电脑和以下设备上暂停。这是我到目前为止一直在玩的 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();
}
});

如果您打算根据 window 大小触发 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); 

如果你喜欢也可以"simplify"上面的函数来:demo

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