在视频点播用aliplayer web播放器,发现退出全屏会暂停视频播放,应该怎么设置可以实现进入或退出全屏都不暂停播放呢?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
在使用阿里云视频点播的Aliplayer Web播放器时,如果发现退出全屏会导致视频暂停播放,这通常是由于浏览器或播放器默认行为导致的。为了实现进入或退出全屏时视频不暂停播放,可以通过以下方式解决:
Aliplayer 提供了对全屏状态的监听能力,您可以通过监听 fullscreenchange
事件来控制全屏切换时的行为。具体操作如下:
var player = new Aliplayer({
id: "player-con",
source: "your_video_url.mp4",
width: "100%",
height: "500px",
autoplay: true,
}, function (player) {
console.log("播放器已创建");
});
// 监听全屏状态变化
player.on('fullscreenchange', function (e) {
// 检查当前是否为全屏状态
if (!player.fullscreenService.isFullScreen()) {
// 如果退出全屏,则继续播放视频
player.play();
}
});
说明: - fullscreenchange
事件会在全屏状态发生变化时触发。 - 使用 player.fullscreenService.isFullScreen()
方法可以判断当前是否处于全屏状态。 - 在退出全屏时调用 player.play()
方法,确保视频不会因退出全屏而暂停。
某些浏览器(如Chrome)对自动播放有严格的限制,尤其是带有声音的视频。为了避免因浏览器策略导致的播放中断,建议在初始化播放器时设置自动播放并禁音:
var player = new Aliplayer({
id: "player-con",
source: "your_video_url.mp4",
width: "100%",
height: "500px",
autoplay: true, // 开启自动播放
}, function (player) {
player.mute(); // 禁音以满足浏览器自动播放策略
console.log("播放器已创建");
});
说明: - 设置 autoplay: true
和 player.mute()
可以避免浏览器阻止自动播放。 - 这种方式可以减少因浏览器限制导致的播放异常。
播放器的皮肤布局(skinLayout
)可能会影响全屏切换时的行为。如果自定义了播放器皮肤,请确保未对全屏按钮或播放按钮添加额外的逻辑,导致退出全屏时触发暂停。
示例代码如下:
var player = new Aliplayer({
id: "player-con",
source: "your_video_url.mp4",
width: "100%",
height: "500px",
autoplay: true,
skinLayout: [
{ name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
{
name: "controlBar",
align: "blabs",
x: 0,
y: 0,
children: [
{ name: "playButton", align: "tl", x: 15, y: 26 },
{ name: "fullScreenButton", align: "tr", x: 20, y: 25 },
],
},
],
}, function (player) {
console.log("播放器已创建");
});
说明: - 自定义 skinLayout
时,请确保未对全屏按钮或播放按钮绑定额外的暂停逻辑。 - 如果问题仍然存在,可以尝试恢复默认皮肤配置进行测试。
如果上述方法仍无法解决问题,建议使用Web播放器SDK提供的诊断工具进行调试。通过诊断工具可以查看播放器的运行日志,定位问题原因。
player.on('error', function (e) {
console.error("播放器发生错误:", e);
});
说明: - 使用诊断工具可以帮助排查是否存在其他配置或环境问题。 - 如果问题涉及特定浏览器或设备,请提供详细信息以便进一步分析。
通过监听 fullscreenchange
事件并在退出全屏时调用 player.play()
方法,可以有效避免退出全屏时视频暂停的问题。同时,建议结合自动播放、禁音以及合理的皮肤配置,确保播放器在各种场景下的稳定性。