VideoJS - 按下播放按钮后禁用自动全屏
VideoJS - Disable auto fullscreen after pressing play button
由于 JWPlayer 荒谬的定价政策,我转向了 VideoJS。
问题是,当用户在 iOS 上启动视频时,它会切换原生全屏。我希望控制面板在全屏模式下可用,但我还无法管理它。
代码:
<video id="tvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="..." data-setup='{"language":"en", "controls": true,"autoplay": false, "fluid": true, "aspectRatio": "16:9", "playbackRates": [0.5, 1, 1.5, 2]}'>
<source src="..." type='video/mp4' label='240p' res='240'/>
<source src="..." type='video/mp4' label='360p' res='360'/>
<source src="..." type='video/mp4' label='720p' res='720'/>
<p class="vjs-no-js">Bu videoyu görüntülemek için lütfen JavaScript'i etkinleştirin.</p>
</video>
<script type="text/javascript">
var myPlayer = videojs("#tvideo");
myPlayer.videoJsResolutionSwitcher({
default: 'high',
dynamicLabel: true
});
myPlayer.persistvolume({
namespace: 'httpswwwseyredelimcom'
});
myPlayer.brand({
image: "...",
title: "...",
destination: "...",
destinationTarget: "_top"
});
myPlayer.ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableModifiersForNumbers: false
});
$(".bAd").detach().appendTo(".video-js");
$(".plAd").detach().appendTo(".video-js");
function resizeVideoJS() {
var containerWidth = $('.video-player').width();
var videoHeight = Math.round((containerWidth / 16) * 9);
myPlayer.width(containerWidth).height(videoHeight);
}
window.onresize = resizeVideoJS;
myPlayer.on("ended", function() {
startNextVideo();
});
});
</script>
我怎样才能做到不自动全屏并让用户在全屏模式下拥有控制面板?
提前致谢。
要保留内联播放,请将 playsinline
属性添加到视频标签。
实际上,这不会像 video.js 中描述的那样起作用。它适用于 straight-up html5 播放器。
对于 video.js,您需要使用 .playsinline(true) 来设置对象的其他属性。您可以在 .ready() 上调用它。
这个方法对我有用:
instanceName.ready(function(){
myPlayer = this;
myPlayer.playsinline(true);
});
由于 JWPlayer 荒谬的定价政策,我转向了 VideoJS。
问题是,当用户在 iOS 上启动视频时,它会切换原生全屏。我希望控制面板在全屏模式下可用,但我还无法管理它。
代码:
<video id="tvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="..." data-setup='{"language":"en", "controls": true,"autoplay": false, "fluid": true, "aspectRatio": "16:9", "playbackRates": [0.5, 1, 1.5, 2]}'>
<source src="..." type='video/mp4' label='240p' res='240'/>
<source src="..." type='video/mp4' label='360p' res='360'/>
<source src="..." type='video/mp4' label='720p' res='720'/>
<p class="vjs-no-js">Bu videoyu görüntülemek için lütfen JavaScript'i etkinleştirin.</p>
</video>
<script type="text/javascript">
var myPlayer = videojs("#tvideo");
myPlayer.videoJsResolutionSwitcher({
default: 'high',
dynamicLabel: true
});
myPlayer.persistvolume({
namespace: 'httpswwwseyredelimcom'
});
myPlayer.brand({
image: "...",
title: "...",
destination: "...",
destinationTarget: "_top"
});
myPlayer.ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableModifiersForNumbers: false
});
$(".bAd").detach().appendTo(".video-js");
$(".plAd").detach().appendTo(".video-js");
function resizeVideoJS() {
var containerWidth = $('.video-player').width();
var videoHeight = Math.round((containerWidth / 16) * 9);
myPlayer.width(containerWidth).height(videoHeight);
}
window.onresize = resizeVideoJS;
myPlayer.on("ended", function() {
startNextVideo();
});
});
</script>
我怎样才能做到不自动全屏并让用户在全屏模式下拥有控制面板?
提前致谢。
要保留内联播放,请将 playsinline
属性添加到视频标签。
实际上,这不会像 video.js 中描述的那样起作用。它适用于 straight-up html5 播放器。
对于 video.js,您需要使用 .playsinline(true) 来设置对象的其他属性。您可以在 .ready() 上调用它。
这个方法对我有用:
instanceName.ready(function(){
myPlayer = this;
myPlayer.playsinline(true);
});