使用鼠标光标向前和向后播放 HTML5 背景视频答案

【问题标题】：Play HTML5 background video forward and backward with the mouse cursor使用鼠标光标向前和向后播放 HTML5 背景视频
【发布时间】：2018-03-30 15:12:36
【问题描述】：

大家好！我想要什么：

我的主页上有一段背景视频（时长 2 秒）。当鼠标光标向右移动时，视频应该从中间向前播放，当鼠标光标向左移动时，视频应该从中间向前播放。是否可以仅在 Android/iPhone 上实现相同的功能？在 Android/iPhone 倾斜时播放视频。也许有人知道这些例子。请附上示例的链接。

【问题讨论】：

请浏览网站（从“帮助”开始），看看您是否可以通过支持代码和任何错误消息提出适当的问题。我没有否决您的问题，但您可以看到其他人已经在这样做了。
欢迎来到 StackOverflow。希望你已经环顾四周，看到了人们在这里提出的各种问题的一些例子，以及他们是如何提出这些问题的。请查看stackoverflow.com/help/how-to-ask 以帮助您获得帮助（没有反对票）

标签： android html video desktop playback

【解决方案1】：

你想看deviceOrientation - https://caniuse.com/#search=deviceorientation

基于此，您可以使用类似于下面的代码来跟踪运动（在这种情况下，我认为它是 beta，尽管根据 CanIUse，您应该注意 Safari 和 Chrome 使用不同的坐标系）来确定在您要滚动到的视频

<body>

<div id="status">Loading...</div>
<div id="alpha"></div>
<div id="beta"></div>
<div id="gamma"></div>

<script>
if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', deviceOrientationHandler, false);
    document.getElementById("status").innerText = "Supported!";
} else {
    alert("Sorry, your browser doesn't support Device Orientation");
}


function deviceOrientationHandler(event) {
    var time = new Date();
    showTime = ("0" + time.getHours()).slice(-2) + ":" + ("0" + time.getMinutes()).slice(-2) + ":" + ("0" + time.getSeconds()).slice(-2);
    document.getElementById("status").innerText = "triggered: " +  showTime
    document.getElementById("alpha").innerText = "Alpha: " + Math.round(event.alpha)
    document.getElementById("beta").innerText = "Beta: " + Math.round(event.beta)
    document.getElementById("gamma").innerText = "Gamma: " + Math.round(event.gamma)
}
</script>

</body>

【讨论】：