blocks|key|195394|text|简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|195395|http://designer.videojs.com+-在less的底部只需添加：|offset|length|195396|.vjs-default-skin+.vjs-big-play-button+{
++margin-left:+-@big-play-width/2;
++margin-top:+-@big-play-height/2;
++left:+50%25;
++top:+50%25;
}|code-block|syntax|javascript|195397|entityMap|0|LINK|mutability|MUTABLE|url|http://designer.videojs.com/^0|0|0|R|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Easy way:

<a href="http://designer.videojs.com" rel="nofollow">http://designer.videojs.com</a> - at the bottom of the less just add:

<pre><code>.vjs-default-skin .vjs-big-play-button {
 margin-left: -@big-play-width/2;
 margin-top: -@big-play-height/2;
 left: 50%;
 top: 50%;
}
</code></pre>

blocks|key|4701230|text|在以下位置创建video-js-custom.css位置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4701231|<link+href="http://vjs.zencdn.net/5.9.2/video-js.css"+rel="stylesheet">
<link+href="link-to-custom-css/video-js-custom.css"+rel="stylesheet">|code-block|syntax|javascript|4701232|添加video-js-custom.css：|4701233|.video-js+.vjs-big-play-button+{
++++left:+40%25+!important;
++++top:+40%25+!important;
++++width:+20%25;
++++height:+20%25;
}

.video-js+.vjs-play-control:before+{
++++top:20%25+!important;
++++content:+'\f101';
++++font-size:+48px;
}|4701234|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Create video-js-custom.css place after:

<pre><code>&lt;link href="http://vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet"&gt;
&lt;link href="link-to-custom-css/video-js-custom.css" rel="stylesheet"&gt;
</code></pre>

Add of video-js-custom.css:

<pre><code>.video-js .vjs-big-play-button {
 left: 40% !important;
 top: 40% !important;
 width: 20%;
 height: 20%;
}

.video-js .vjs-play-control:before {
 top:20% !important;
 content: '\f101';
 font-size: 48px;
}
</code></pre>

blocks|key|195451|text|将自定义CSS添加到代码中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|195452|.vjs-big-play-button+{
++++margin-top:+20%25;
++++margin-left:+40%25;
++++width:+70px+!important;
++++height:+70px+!important;
}|code-block|syntax|javascript|195453|相应地调整宽度和高度。|195454|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Add a custom CSS to your code

<pre><code>.vjs-big-play-button {
 margin-top: 20%;
 margin-left: 40%;
 width: 70px !important;
 height: 70px !important;
}
</code></pre>

Adjust width and height accordingly.

blocks|key|4701303|text|我使用"limelight+player“，它使用video.js来提供HTML5解决方案，但我在iOS设备中居中播放按钮图标时遇到了问题。报告的问题和支持无法提供解决方案。他们确实确认了问题。我想分享我的解决方案，这可能会对某些人有所帮助。解决方案很简单:减小字体大小！除了"font-size“之外，继承的"line-height”属性也可能需要调整。这两个属性增加了父容器，如果父容器没有设置为相对容器或视频播放器容器设置为响应式(宽度:100%25；高度:100%25)，则会发生未对齐|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4701304|所以帮助我的CSS解决方案是：|4701305|.video-js+.vjs-limelight-big-play{+
++++++font-size:100px!important+/*or+less+*/
}|code-block|syntax|javascript|4701306|或者更好地从PX切换到EM，这将有助于移动设备(iOS在播放按钮居中时也遇到了问题)|4701307|.video-js+.vjs-limelight-big-play{+
++++++font-size:10em!important+/*or+less+depending+on+your+design*/
}|4701308|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I use "limelight player" that uses video.js to deliver HTML5 solution but I have problem to center play button icon in iOS devices. Reported issue and support could not come with solution. They did confirm issue. I thought of sharing my solution that might help somebody. Solution was simple: decrease font size! Besides the "font-size" there is inherited "line-height" property that might need adjustment too. These two properties increase parent container and misalignment happens if parent container is not set to be relative or video player container is set to be responsive (width:100% ; height:100%) 

So CSS solution that helped me was: 

<pre><code>.video-js .vjs-limelight-big-play{ 
 font-size:100px!important /*or less */
}
</code></pre>

Or even better switch from PX to EM which will help in mobile devices (iOS experienced issue with centering of a play button too) 

<pre><code>.video-js .vjs-limelight-big-play{ 
 font-size:10em!important /*or less depending on your design*/
}
</code></pre>

blocks|key|195544|text|在"video.js":+"%5E7.7.5"版本中，以下配置对我有效:+class+vjs-big-play-centered将按钮放在播放器的中心。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|195545|样式表|195546|+<link+href="https://vjs.zencdn.net/7.7.5/video-js.css"+rel="stylesheet"+/>
++
++<link+href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"+rel="stylesheet">|code-block|syntax|javascript|195547|HTML|195548|<video
++id="my-video"
++class="video-js+vjs-theme-city+vjs-big-play-centered"
++controls
++playsinline
++preload="auto"
++width="640"
++height="480"
++data-setup="{}"
>
++<source+src="{{this.url}}"+type="application/x-mpegURL"/>
++<p+class="vjs-no-js">
++++To+view+this+video+please+enable+JavaScript,+and+consider+upgrading+to+a
++++web+browser+that
++++<a+href="https://videojs.com/html5-video-support/"+target="_blank"
++++>supports+HTML5+video</a
++++>
++
</video>|195549|entityMap^0|1|K|15|L|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

As of version <code>"video.js": "^7.7.5"</code> following config works for me:
class <code>vjs-big-play-centered</code> centers the button on player.

Stylesheet

<pre><code> &lt;link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" /&gt;
 &lt;!-- City --&gt;
 &lt;link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet"&gt;
</code></pre>

HTML

<pre><code>&lt;video
 id="my-video"
 class="video-js vjs-theme-city vjs-big-play-centered"
 controls
 playsinline
 preload="auto"
 width="640"
 height="480"
 data-setup="{}"
&gt;
 &lt;source src="{{this.url}}" type="application/x-mpegURL"/&gt;
 &lt;p class="vjs-no-js"&gt;
 To view this video please enable JavaScript, and consider upgrading to a
 web browser that
 &lt;a href="https://videojs.com/html5-video-support/" target="_blank"
 &gt;supports HTML5 video&lt;/a
 &gt;
 &lt;/p&gt;
&lt;/video&gt;

</code></pre>

I thought I'd share a piece of code that might come in handy to someone. This is a function that center's the play button inside the video-js player, it works for me. You just need to call it on the pause event and when the player is initialized and not being autoplayed.

Enjoy!

<pre><code>function CenterPlayBT() {
 var playBT = $(".vjs-big-play-button");
 playBT.css({
 left:( (playBT.parent().outerWidth()-playBT.outerWidth())/2 )+"px",
 top:( (playBT.parent().outerHeight()-playBT.outerHeight())/2 )+"px"
 });
}
</code></pre>

VideoJS centered play button

容器

HTML5

我想我应该分享一段代码，这段代码可能对某些人有用。这是一个功能，中心的播放按钮内的视频-js播放器，它对我的工作。你只需要在pause事件上调用它，当播放器被初始化并且没有被自动播放时。享受吧！function CenterPlayBT() {   var playBT = $(".vjs-big-play-butto...

问VideoJS居中播放按钮
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VideoJS居中播放按钮EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VideoJS居中播放按钮
EN