Tcplayer web进入全屏后阻止默认按enter和space键退出全屏
原创Tcplayer web进入全屏后阻止默认按enter和space键退出全屏
原创
良人
修改于 2022-02-14 11:13:00
修改于 2022-02-14 11:13:00
说明
当前Tcplayer SDK进入全屏后按enter或space键是可以退出全屏的， 官方体验demo，那如果不想使用这两个键来退出全屏怎么阻止呢。
解决方案
经过测试可以通过监听播放组件的键盘事件，然后拦截该事件来阻止SDK默认退出全屏行为，代码如下
<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>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
相关产品与服务