移动端Instagram克隆：滑动切换视频音频异常修复需求

经用户授权后，移动端浏览器中带声音的视频需像Instagram Reels一样播放。我开发了一个Instagram克隆应用，设有通过变量ton（取值True/False）控制音频开关的按钮。当前存在以下问题：

• 开启音频后，滑动切换下一个视频时，视频无法播放，必须先关闭音频（将ton设为false）才能播放，再次开启音频后才有声音。
• 若开启第一个视频音频后，点击切换下一个视频，音频会保持开启状态且视频可立即播放。

需要修改哪些内容，才能让移动端滑动操作与点击操作效果一致？

相关代码 #

视频加载函数 #

function loadnextvideo(){

     <.....
    another code -- another code -- another code
     .....>

$("#"+counter.toString()+"Mainvideo").find("#"+counter.toString()+"videoholder0").find("video").each(function(){
  
        Video = this
        if (ton == false){
          this.play();
          $(this).prop("muted", true)
        
        } else {
          this.play();
          $(this).prop("muted", false)
    

        }

 
      })
    })
}

正常工作的点击切换代码 #

$(".buttonup").click(function(){
  loadnextvideo()
})

无法正常工作的滑动切换代码 #

var startX, startY, distX, distY, threshold = 20; // 滑动的最小距离
var swipeArea = document.body;
var isSwipe = false; // 用于判断是否为滑动操作的变量

swipeArea.addEventListener('touchstart', function(e) {
  var touchObj = e.changedTouches[0];
  startX = touchObj.pageX;
  startY = touchObj.pageY;
  isSwipe = false; // 每次新触摸开始时重置为false
}, false);

swipeArea.addEventListener('touchmove', function(e) {
  var touchObj = e.changedTouches[0];
  distX = touchObj.pageX - startX;
  distY = touchObj.pageY - startY;
  
  // 判断滑动距离是否超过阈值
  if (Math.abs(distX) > threshold || Math.abs(distY) > threshold) {
    isSwipe = true; // 判定为滑动操作
    e.preventDefault(); // 仅在滑动时阻止默认滚动行为
  }
}, false);

swipeArea.addEventListener('touchend', function(e) {
  if (isSwipe) {
    // 仅当判定为滑动时执行操作
    if (Math.abs(distY) > Math.abs(distX)) {
      if (distY > 0) {
        // 向后滑动
      } else {
        // 向前滑动至下一个视频
        loadnexvideo()
      }
      e.preventDefault();
    }
    isSwipe = false; // 滑动处理完成后重置
  }
  // 若未判定为滑动，则保留默认行为，即触发点击事件
}, false);

1. 修复函数名拼写错误 #

滑动代码中调用的loadnexvideo()存在拼写错误，正确函数名为loadnextvideo()（少了字母t），这是导致滑动时无法正确触发视频加载的直接原因，先修正该错误。

2. 调整滑动事件的默认行为拦截时机 #

移动端浏览器对带声音的视频播放有严格限制：play()必须在用户主动交互（点击、滑动等）的事件回调上下文内执行。原代码在touchmove阶段就调用e.preventDefault()，可能破坏了浏览器对用户交互的信任判定，建议调整：

• 把e.preventDefault()移到touchend的垂直滑动逻辑中，仅在确认是目标滑动操作时阻止默认行为，避免提前干扰交互上下文。

修改后的滑动事件代码：

var startX, startY, distX, distY, threshold = 20;
var swipeArea = document.body;
var isSwipe = false;

swipeArea.addEventListener('touchstart', function(e) {
  var touchObj = e.changedTouches[0];
  startX = touchObj.pageX;
  startY = touchObj.pageY;
  isSwipe = false;
}, false);

swipeArea.addEventListener('touchmove', function(e) {
  var touchObj = e.changedTouches[0];
  distX = touchObj.pageX - startX;
  distY = touchObj.pageY - startY;
  
  if (Math.abs(distX) > threshold || Math.abs(distY) > threshold) {
    isSwipe = true;
    // 此处暂不调用preventDefault，保留交互上下文判定
  }
}, false);

swipeArea.addEventListener('touchend', function(e) {
  if (isSwipe) {
    if (Math.abs(distY) > Math.abs(distX)) {
      e.preventDefault(); // 仅在垂直滑动时阻止默认滚动
      if (distY < 0) {
        // 调用正确的视频加载函数
        loadnextvideo();
      }
    }
    isSwipe = false;
  }
}, false);

3. 优化视频播放逻辑适配移动端规则 #

为了兼容移动端自动播放限制，可以先以静音状态启动视频，再根据ton值调整音频状态，确保视频能正常播放：

// 修改loadnextvideo中的视频遍历逻辑
$("#"+counter.toString()+"Mainvideo").find("#"+counter.toString()+"videoholder0").find("video").each(function(){
  this.muted = true; // 先设置静音，确保能触发播放
  this.play().then(() => {
    // 播放成功后，根据ton值切换音频状态
    if (ton) {
      this.muted = false;
    }
  }).catch(err => {
    console.log("视频播放失败:", err);
  });
})

内容的提问来源于stack exchange，提问作者Florian Buchfink