如何强制 Clappr 播放器在更改视频后保持全屏?
我编写了一个在 PLAYER_ENDED 事件上触发的函数,函数使用此 load
方法加载下一个视频:
enter code here`enter code here`player.load([{source: 'video_url_exmpl'}], null, true);
但是当事件被触发并且新的视频加载播放器取消全屏模式时。我设置了选项:
exitFullscreenOnEnd: false,
我编写了一个插件,该插件应该切换全屏,但浏览器会抛出警告消息:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture
这是我的 Clappr 播放器初始化和设置:
player = new Clappr.Player({
source: sourceUrl,
parentId: "#player",
autoPlay: true,
width: '100%',
height: '100%',
exitFullscreenOnEnd: false,
playInline: true,
recycleVideo: Clappr.Browser.isMobile,
poster: '',
}).on(Clappr.Events.PLAYER_ENDED, function() {
player.load([{source: 'video_url'}], null, true);
}
});
最佳答案
在官方 Clappr GitHub Issues 上找到了临时解决方案。感谢kslimani。
var player = new Clappr.Player({
parentId: "#player-wrapper",
source: 'http://clappr.io/highline.mp4',
height: 360,
width: 640,
exitFullscreenOnEnd: false,
playback: {
playInline: true,
recycleVideo: true,
},
events: {
onEnded: function () {
var setSource = function (newSrc) {
this.core.options.source = newSrc;
var container = this.core.getCurrentContainer();
var playback = this.core.getCurrentPlayback();
if (container) {
container.options.source = newSrc;
}
if (playback) {
playback.options.source = newSrc;
playback._setupSrc && playback._setupSrc(newSrc);
}
}.bind(this);
// Set another .mp4 source and start again player
setSource('https://static.playmedia-cdn.net/resources/sample/h264_sintel_trailer-1080p.mp4');
this.play();
}
}
});
请注意,此代码是一个丑陋的技巧,可能会让某些播放器组件(如插件)处于不一致的状态。仅当源格式相同时此功能才有效(即:所有源均为 .mp4 文件)。 但应该给你一些从哪里开始挖掘的提示。 Link on Clappr GitHub threat
关于javascript - 全屏不适用于 clappr 播放器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45118638/