iOS视频播放限制
由于iOS Safari的限制，视频自动播放被阻止，需要用户交互才能触发播放。除了常见的click事件，还有其他多种交互方式。
提示： 在iOS设备上，用户必须与页面进行直接的物理交互（触摸）才能触发视频播放。
1. Touch事件
使用touchstart、touchend等触摸事件来触发视频播放。
// 使用touch事件触发视频播放
videoElement.addEventListener('touchend', function(e) {
e.preventDefault();
videoElement.play();
});
videoElement.addEventListener('touchend', function(e) {
e.preventDefault();
videoElement.play();
});
触摸下方区域来播放视频
触摸此处播放视频
2. 手势事件
使用滑动、缩放等手势事件触发视频播放。
// 检测滑动手势
let startX, startY;
gestureArea.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});
gestureArea.addEventListener('touchend', function(e) {
let endX = e.changedTouches[0].clientX;
let endY = e.changedTouches[0].clientY;
// 如果滑动距离足够长
if (Math.abs(endX - startX) > 50 || Math.abs(endY - startY) > 50) {
videoElement.play();
}
});
let startX, startY;
gestureArea.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});
gestureArea.addEventListener('touchend', function(e) {
let endX = e.changedTouches[0].clientX;
let endY = e.changedTouches[0].clientY;
// 如果滑动距离足够长
if (Math.abs(endX - startX) > 50 || Math.abs(endY - startY) > 50) {
videoElement.play();
}
});
在下方区域滑动来播放视频
左右滑动播放视频
3. 表单交互
通过表单元素（如滑块、选择框）的变化触发视频播放。
// 音量滑块控制
volumeSlider.addEventListener('input', function() {
if (!videoStarted) {
videoElement.play();
videoStarted = true;
}
videoElement.volume = this.value;
});
volumeSlider.addEventListener('input', function() {
if (!videoStarted) {
videoElement.play();
videoStarted = true;
}
videoElement.volume = this.value;
});
调整音量滑块来触发视频播放
当前音量: 0.5
4. 设备方向与运动
使用设备方向或运动事件触发视频播放（需要用户授权）。
// 检测设备摇动
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(e) {
if (Math.abs(e.gamma) > 30 && !videoStarted) {
videoElement.play();
videoStarted = true;
}
});
}
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(e) {
if (Math.abs(e.gamma) > 30 && !videoStarted) {
videoElement.play();
videoStarted = true;
}
});
}
在支持设备方向检测的iOS设备上，倾斜设备可能触发视频播放
倾斜设备尝试播放视频
注意：此功能需要用户授权访问设备方向信息，且仅在支持此API的设备上有效。
5. 游戏手柄交互
通过游戏手柄按钮触发视频播放（需要Gamepad API支持）。
// 检测游戏手柄按钮按下
window.addEventListener("gamepadconnected", function(e) {
console.log("游戏手柄已连接");
requestAnimationFrame(checkGamepad);
});
function checkGamepad() {
let gamepads = navigator.getGamepads();
for (let i = 0; i < gamepads.length; i++) {
let gp = gamepads[i];
if (gp && gp.buttons[0].pressed && !videoStarted) {
videoElement.play();
videoStarted = true;
}
}
requestAnimationFrame(checkGamepad);
}
window.addEventListener("gamepadconnected", function(e) {
console.log("游戏手柄已连接");
requestAnimationFrame(checkGamepad);
});
function checkGamepad() {
let gamepads = navigator.getGamepads();
for (let i = 0; i < gamepads.length; i++) {
let gp = gamepads[i];
if (gp && gp.buttons[0].pressed && !videoStarted) {
videoElement.play();
videoStarted = true;
}
}
requestAnimationFrame(checkGamepad);
}
连接游戏手柄并按下按钮尝试播放视频
按下游戏手柄按钮