web-dev-qa-db-ja.com

VideoJS中心の再生ボタン

誰かに役立つコードを共有すると思いました。これは、video-jsプレーヤー内の再生ボタンを中央に配置する機能です。一時停止イベントと、プレーヤーが初期化され、自動再生されていないときに呼び出すだけです。

楽しい！

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"
   });
}
videovideo-streaminghtml5-video
27
user1592579

Videojs.comで、または@misterbenが上記のように「ビデオ要素にvjs-big-play-centeredクラスを追加するだけ」で再生してみてください。

<video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="360"... ></video>

遊び場： https://codepen.io/heff/pen/EarCt

SCSSバージョンでは、使用できます

$center-big-play-button: true;
58
Adrian P.

次の後にvideo-js-custom.cssプレースを作成します。

<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">

Video-js-custom.cssの追加：

.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;
}
1
IT Vlogs

簡単な方法：

http://designer.videojs.com -一番下に追加するだけです：

.vjs-default-skin .vjs-big-play-button {
  margin-left: -@big-play-width/2;
  margin-top: -@big-play-height/2;
  left: 50%;
  top: 50%;
}
0
Chris Beck

カスタムCSSをコードに追加します

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

それに応じて幅と高さを調整します。

0
Kapil

Video.jsを使用してHTML5ソリューションを提供する「ライムライトプレーヤー」を使用していますが、iOSデバイスの再生ボタンアイコンを中央に配置するのに問題があります。報告された問題とサポートには解決策がありません。彼らは問題を確認しました。誰かを助けるかもしれない私のソリューションを共有することを考えました。解決策は簡単でした：フォントサイズを小さくします！ 「font-size」の他に、調整が必要な「line-height」プロパティが継承されます。これら2つのプロパティは親コンテナを増やし、親コンテナが相対に設定されていない場合、またはビデオプレーヤーコンテナが応答するように設定されている場合（幅：100％、高さ：100％）にずれが発生します

だから私を助けたCSSソリューションは：

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

または、モバイルデバイスで役立つPXからEMに切り替えることもできます（iOSでも再生ボタンのセンタリングで問題が発生します）。

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