Question

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

这是我的全屏代码：

＆＃13;

		$('.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');
			}
		});

＆＃13;

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

＆＃13;

<div id="videoContainer" width='{{width}}' height='{{height}}'>
        <video id='{{videoContainerID}}-video' class='{{videoID}}' controls poster='{{thumbnailURL}}' width="100%">
                <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>

＆＃13;

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

Answer 1

<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365">
  <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();
    }
  }
}

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

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

1 个答案: