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

Posted 2021-05-11

// 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 -->