Question

我希望能够配置controlsBelow和controlsHiding（总是在下面显示控件），但我发现能够做到这一点的唯一方法是使用VideoJS.setupAllWhenReady（）（它似乎是以前的版本VJS），而不是videojs（）作为当前的文档（v4.12，在这篇文章的时候）说要使用。 doc的选项页面中没有任何内容提到这些选项中的任何一个，所以也许它不再受支持了？

var setup = {
	"techOrder" : ['html5', 'flash'],
	"controls": true,
	"preload": "auto",
	"children": { 
		"controlBar": { 
			"children": { 
				"volumeMenuButton": true, 
				"muteToggle": false, 
				"volumeControl": false // displays volume control bar atop button
			}
		}
	}
};

var player = videojs('player', setup, function(){
	var myPlayer = this;

	myPlayer.play();
});

<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"/>
<script src="//vjs.zencdn.net/4.12/video.js"></script>



<div class="video-js-box">
	<video id="player" class="video-js vjs-default-skin vjs-big-play-centered vjs-block-error" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
		<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
		<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
		<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
		<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
		<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
			data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
			<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
			<param name="allowfullscreen" value="true" />
			<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
			<param name="bgcolor" value="#f30000">
			<param name="wmode" value="opaque">
			<!-- Image Fallback. Typically the same as the poster image. -->
			<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
				title="No video playback capabilities." />
		</object>
	</video>
</div>

Answer 1

在彻底阅读完代码之后，我没有看到这些选项中的任何一个可用，因为我担心（我只是希望有人可能知道我没有的东西）。我已经将控制栏设置为始终显示（在短暂的用户不活动时间后不淡出，这是默认行为）并显示在视频下方而不是通过CSS显示在其上，但在全屏模式下控制栏会在浏览器的视口（eek）下滑动。我最后添加了一个：not（）选择器来保持全屏模式下的默认行为。这对我有用。

var setup = {
	"techOrder" : ['html5', 'flash'],
	"controls": true,
	"preload": "auto",
	"children": { 
		"controlBar": { 
			"children": { 
				"volumeMenuButton": true, 
				"muteToggle": false, 
				"volumeControl": false // displays volume control bar atop button
			}
		}
	}
};

var player = videojs('player', setup, function(){
	var myPlayer = this;

	myPlayer.play();
});

/* force control bar to display at all times if not in fullscreen mode */
.vjs-default-skin:not(.vjs-fullscreen).vjs-has-started .vjs-control-bar {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}
/* move under video if not in fullscreen (else it will disappear below the browser viewport */
.vjs-default-skin:not(.vjs-fullscreen) .vjs-control-bar { 
	bottom: -30px;
}

<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"/>
<script src="//vjs.zencdn.net/4.12/video.js"></script>



<div class="video-js-box">
	<video id="player" class="video-js vjs-default-skin vjs-big-play-centered vjs-block-error" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
		<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
		<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
		<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
		<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
		<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
			data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
			<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
			<param name="allowfullscreen" value="true" />
			<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
			<param name="bgcolor" value="#f30000">
			<param name="wmode" value="opaque">
			<!-- Image Fallback. Typically the same as the poster image. -->
			<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
				title="No video playback capabilities." />
		</object>
	</video>
</div>

向video.js添加选项

1 个答案: