video.js全屏bug&隐藏/添加全屏按钮

Posted 2023-04-14

参考技术A

最近项目中接入 video.js 框架，在安卓机上 全屏 时， 有声音无画面 。

通过调试，发现在全屏后，video标签 width & height 均为0，

经过查看video.js官网文档，检查播放器实例配置，无误，Google各种方案无果。
果断放弃video自带的全屏方案。
通过修改video标签旋转，按宽高比放大视频至设备屏幕宽高

此时可以实现全屏效果。

但是问题又出现了，手机的20px的 状态条 仍旧在 =_=#

可以结合cordova插件 cordova-plugin-statusbar 插件实现。
【插件地址 传送门】

至此，曲线救国，问题修复。

html Video.js - 播放时隐藏（绝对定位）视频帧中的文本标题

// hide text when video is playing
(function() {
  var video = $('.video-js').find('video');

  video.on("playing", function(){
    $(this).closest('.episode').find('.hide-when-playing').addClass('hidden');
  });

  video.on("pause", function(){
    $(this).closest('.episode').find('.hide-when-playing').removeClass('hidden');
  });
  
  video.on("ended", function(){
    // do stuff..
  });

})();

<div class="episode">
	<div class="hide-when-playing">
		<h2>Video Title to hide when playing</h2>
	</div>
	<video id="video" class="video-js" controls preload="auto" poster="poster.jpg" data-setup="{}">
    <source src="video.mp4" type='video/mp4'>
    <source src="video.webm" type='video/webm'>
    <p class="vjs-no-js">To view this video please enable JavaScript</p>
  </video>
</div><!-- .episode -->