Howto place the start button in the middle of the

问题:

I found the designer page on http://www.videojs.com/ there you can change the position of the start button to be in the middle of your clips.

But I am not able to place or use this stylesheets on the video.js player. Could some one explain how to use it in the player. E. G. to extend the existing css with an extra file? or how to change the existing css to place the button not on the left top but in the middle?

Thanks. Katasun

回答1:

You can add 'vjs-big-play-centered' to video class.

 <video id="player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="700" height="450" poster="http://www.videojs.com/img/poster.jpg"><source src="" type="video/mp4"></video>

回答2:

Using version 4.1.0:

In video-js.css, in .vjs-default-skin .vjs-big-play-button (line 484+) replace:

top: 2em;
left: 2em;
margin: 0;

with:

top: 50%;
left: 50%;
margin-left: -6em;
margin-top: -4em;

-6em and -4em because the width is 12em and height is 8em

Just had the same problem and had to fix it this way :) Works on the latest chrome, firefox, safari and opera, didn't test on IE, i'm on OSX

回答3:

I have amended a version of videojs where you can place the play button anywhere. This also means being able to touch the thumbnail anyway on IOS devices (doesn't have to be the center) and it will run the video. http://www.andy-howard.com/recreate-bbc-iplayer/index.html