在屏幕尺寸上播放/暂停 HTML5 视频答案

【问题标题】：Play/Pause HTML5 Video on screen size在屏幕尺寸上播放/暂停 HTML5 视频
【发布时间】：2015-01-31 01:19:59
【问题描述】：

我想根据屏幕尺寸播放/暂停视频，例如，我希望视频在桌面上自动播放，但在平板电脑及以下设备上暂停。这是迄今为止我一直在使用的 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();
}
});

【问题讨论】：

标签： javascript html5-video

【解决方案1】：

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

【讨论】：

这几乎可以完美运行，如果我调整浏览器大小，它可以暂停视频。如果视频以低于 960 像素的尺寸开始播放，它仍会自动播放。