当前位置: 首页 > article >正文

H5页面多个视频如何只同时播放一个?

目录

      • 背景
        • 1. 首先介绍下 muted 属性
        • 2. 监听播放和暂停操作
        • 3. 视频播放完毕后返回桌面,再进入H5页面发现视频封面丢失置灰
          • 解决思路:

背景

页面模块同时有个四个视频模块,发现可以同时播放四个视频,但是理想的是每次只播放一个。
在这里插入图片描述

旧代码:

<div class="list-item" v-for="item of VIDEO_TYPES" :key="item.title">
 <video
   ref="videosRef"
   class="video"
   playsinline
   muted
   webkit-playsinline
   preload="auto"
   x5-video-player-type="h5-page"
   controls
   :poster="item.poster"
   :src="item.video"
 ></video>
 </div>

1. 首先介绍下 muted 属性

一个布尔属性,指明在视频中音频的默认设置。设置后,音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。

视频静音的情况下,IOS 可以同时播放多个,所以把这个属性去掉,IOS 每次就只能播放一个了,但是 Android 比较特殊,即使去到这个属性也还是可以同时播放多个视频。

2. 监听播放和暂停操作

在每次点击播放的时候,先停止所有视频,然后在播放正在点击的视频。

 <div class="list-item" v-for="item of VIDEO_TYPES" :key="item.title">
   <video
     ref="videosRef"
     class="video"
     playsinline
     webkit-playsinline
     preload="auto"
     x5-video-player-type="h5-page"
     controls
     :poster="item.poster"
     :src="item.video"
     @play="onPlay(item.video)"
     @pause="onPause(item.video)"
   ></video>
   <div class="title">{{ item.title }}</div>
 </div>

const activeVideoId = ref('');

const onPlay = (videoId) => {
  if (isIOS) return; // IOS不需要处理,不然会有点击的卡顿感
  // 如果已有视频在播放,暂停它
  if (activeVideoId.value && activeVideoId.value !== videoId) {
    const activeVideo = videosRef.value.find((video) => {
      return video.src === activeVideoId.value;
    });
    if (activeVideo) {
      activeVideo.pause();
    }
  }
  activeVideoId.value = videoId; // 设置当前播放的视频
};
// 视频暂停时触发
const onPause = (videoId) => {
  if (isIOS) return;

  if (activeVideoId.value === videoId) {
    activeVideoId.value = null; // 清除当前播放的视频 ID
  }
};

在这里插入图片描述

3. 视频播放完毕后返回桌面,再进入H5页面发现视频封面丢失置灰

在这里插入图片描述
可能原因:
当你退出视频播放页面(例如最小化到桌面),浏览器可能会暂停页面的 JavaScript 执行或丢失某些页面状态。导致重新进入页面时,视频封面未被正确恢复。

解决思路:

确保封面重新加载:

在页面重新进入时,强制重新加载封面图像。你可以通过监听 visibilitychange 事件或使用 onfocus 事件来确保封面图像的状态恢复。

const refreshVideo = () => {
  const videos = document.querySelectorAll('video');

  // 遍历每个 video 元素
  videos.forEach((video) => {
    const src = video.getAttribute('src');
    const wasPlaying = !video.paused;

    video.setAttribute('src', '');
    video.setAttribute('src', src);
    if (wasPlaying) {
      video.play();
    } else {
      // 重新加载视频
      video.load();
    }
  });
};

onMounted(() => {
  document.addEventListener('visibilitychange', refreshVideo);
  });
onBeforeMount(() => {
  document.removeEventListener('visibilitychange', refreshVideo);
});

http://www.kler.cn/a/396302.html

相关文章:

  • 【环境配置】macOS配置jdk与maven
  • 数据库的性能优化 -- SQL性能优化
  • Qt 日志文件的滚动写入
  • 「QT」文件类 之 QDataStream 数据流类
  • 前端面试笔试(二)
  • K8S单节点部署及集群部署
  • 【idea】更换快捷键
  • 51c大模型~合集42
  • ComfyUI-image2video模型部署教程
  • 第三代指标平台和其他BI工具/指标管理平台有何区别
  • 【Linux学习】【Ubuntu入门】1-4 ubuntu终端操作与shell命令2
  • 聊天服务器(7)数据模块
  • 29-Elasticsearch 集群监控
  • i春秋-SQLi(无逗号sql注入,-- -注释)
  • Android Binder通信02 - 驱动分析 - 架构介绍
  • Python读写Excel的全面教程
  • Rust 入门指南(零):安装及 Cargo 管理器
  • 用EXCEL一列数据拼接SQL的where条件in语句
  • wordpress下载站主题推荐riproV5 wordpress日主题
  • python makedirs() 详解
  • 动态规划-背包问题——[模版]完全背包问题
  • NotePad++中安装XML Tools插件
  • 接上篇-使用 element-plus 优化UI界面
  • WukongCRM:github高分开源项目,基于微服务架构 +vue ElementUI的前后端分离CRM系统
  • Linux基本指令(中)(2)
  • 数据结构 ——— 层序遍历链式二叉树