Tcplayer web进入全屏后阻止默认按enter和space键退出全屏

2022-02-14 11:13:00 浏览数 (1)

说明

当前Tcplayer SDK进入全屏后按enter或space键是可以退出全屏的, 官方体验demo,那如果不想使用这两个键来退出全屏怎么阻止呢。

解决方案

经过测试可以通过监听播放组件的键盘事件,然后拦截该事件来阻止SDK默认退出全屏行为,代码如下

代码语言:javascript复制
 <body>
 <!-- 设置播放器容器 -->
 <video
 id="player-container-id"
 preload="auto"
 width="640"
 height="360"
 playsinline
 webkit-playsinline
 ></video>
 <!--
注意事项:
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID,可自行设置
* 播放器区域的尺寸请按需设置,建议通过 css 进行设置,通过css可实现容器自适应等效果
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放,此处仅作示例,请按需使用
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
-->
 <script>
 var player = TCPlayer("player-container-id", {
 // player-container-id 为播放器容器ID,必须与html中一致
 fileID: "7447398157015849771", // 请传入需要播放的视频filID 必须
 appID: "1256993030", // 请传入点播账号的appID 必须
 //其他参数请在开发文档中查看
 autoplay: true,
 mute: true,
 plugins: {
 ContinuePlay: {
 auto: true, // 是否在播放时自动续播
 },
 ProgressMarker: true,
  },
 });

 // 阻止enter键和space键退出全屏
 const domV = document.getElementById("player-container-id"); // video id
 domV.addEventListener("keydown", (event) => {
 if (event.keyCode === 13 || event.keyCode === 32) {
      event.keyCode = 0;
      event.returnValue = false;
    }
  });
 </script>
 </body>

体验效果

0 人点赞