Question

大家好！我想要的是什么：

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

Answer 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>

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

1 个答案: