自定义 HTML5 视频播放器不能全屏显示？

Posted 2023-05-07

【中文标题】自定义 HTML5 视频播放器不能全屏显示？

【英文标题】：Custom HTML5 video player not going full screen?

【发布时间】：2016-04-21 06:40:16

【问题描述】：

嗨，我正在做一个项目，正在制作一个自定义视频播放器，我使用这个网站来帮助制作它http://www.inwebson.com/demo/html5-video/demo1/。所以我的问题是控件可以全屏显示，但视频在中间保持其原始大小，黑色填充屏幕的其余部分。

这是我的全屏代码：

		$('.buttonFullscreen').on('click', function() 
			$(this).toggleClass('enterFullscreenBtn');
			if ($.isFunction(video[0].webkitEnterFullscreen)) 
				if ($(this).hasClass("enterFullscreenBtn")) 
					    document.getElementById('videoContainer').webkitRequestFullScreen();
				 else 
					document.webkitCancelFullScreen();
				
			 else if ($.isFunction(video[0].mozRequestFullScreen)) 
				if ($(this).hasClass("enterFullscreenBtn")) 
					document.getElementById('videoContainer').mozRequestFullScreen();
				 else 
					document.mozCancelFullScreen();
				
			 else 
				alert('Your browsers doesn\'t support fullscreen');
			
		);

这是我的视频和控件代码：

<div id="videoContainer" width='width' height='height'>
        <video id='videoContainerID-video' class='videoID' controls poster='thumbnailURL' >
                <source src='videoURL' type='video/mp4'></source>
                <p class='hlplayer-unsupported-player'>Your browser is not supported by this player. This video player is still in development.</p>
        </video>

        <div class='hlplayer-video-title'>title</div>

        <div class='controls'>
                <div class='top-bar-controls' width='width'>
                        <div class='progress'>
                                <span class='buffer-bar'></span>
                                <span class='time-bar'></span>
                        </div>
                        <div class='time'>
                                <span class='current'></span> / <span class='duration'></span>
                        </div>
                </div>

                <div class='bottom-bar-controls' width='width'>
                        <div class='buttonPlay button' title='Play/Pause'></div>
                        <div class='buttonSettings button' title='Settings'></div>
                        <div class='buttonNotes button' title='Take Notes'></div>
                        <div class='buttonLight lighton button' title='Light On/Off'></div>

                        <div class='buttonFullscreen button' title='Fullscreen'></div>
                        <div class='volume' title='Volume'>
                                <span class='volume-bar'></span>
                        </div>

                        <div class='sound sound2 button' title='Mute/Unmute'></div>
                </div>
        </div>

        <div class='loading'></div>

        <div class='hlplayer-settings'>
                <label class='settings-checkbox-label'><input class='settings-checkbox' id="show-notes-checkbox" type='checkbox' name='notes' checked></input> Show Notes</label>
        </div>


</div>

你能想到为什么会这样吗？提前致谢。

【参考方案1】：

<div id="video-container">
<!-- Video -->
<video id="video"  >
  <source src="videos/mikethefrog.webm" type="video/webm">
  <source src="videos/mikethefrog.ogv" type="video/ogv">
  <source src="videos/mikethefrog.mp4" type="video/mp4">
  <p>
    Your browser doesn't support HTML5 video.
    <a href="videos/mikethefrog.mp4">Download</a> the video instead.
  </p>
</video>
<!-- Video Controls -->
<div id="video-controls">
  <button type="button" id="full-screen">Full-Screen</button>
</div>
</div>

fullScreenButton.addEventListener("click", function() 
  if (video.requestFullscreen) 
    video.requestFullscreen();
   else if (video.mozRequestFullScreen) 
    video.mozRequestFullScreen(); // Firefox
   else if (video.webkitRequestFullscreen) 
    video.webkitRequestFullscreen(); // Chrome and Safari
  
);

或者您可以使用以下内容：

<script>
var videoElement = document.getElementById("myvideo");

function toggleFullScreen() 
  if (!document.mozFullScreen && !document.webkitFullScreen) 
    if (videoElement.mozRequestFullScreen) 
      videoElement.mozRequestFullScreen();
     else 
      videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    
   else 
    if (document.mozCancelFullScreen) 
      document.mozCancelFullScreen();
     else 
      document.webkitCancelFullScreen();
    
  

如果这些都不起作用，请使用其他播放器。那里有很多工作:)。