4

私はVideo.js自分のWebページでビデオを再生するために使用しています。ボタンのみを再生するようにプレーヤーコントロールをカスタマイズしたい。

私のコードは

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">

<script src="http://vjs.zencdn.net/c/video.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls
                    preload="auto" width="320" height="240" poster="thumb.png"
                    data-setup="{}">
                    <source src="v1.mp4" type='video/mp4'>
                    </video>

誰かがプレーヤーのカスタマイズについて私を導くことができますか？

4

5 に答える 5

9

display: none;私がそれを行うことができた方法は、私のページのCSSで特定のコントロールのcssクラスをに設定することでした。video-js.cssがリンクされた後、私のページのCSSがリンクされます。

/* Video.js Controls Style Overrides */
.vjs-default-skin .vjs-progress-control,
.vjs-default-skin .vjs-time-controls,
.vjs-default-skin .vjs-time-divider,
.vjs-default-skin .vjs-captions-button,
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-control,
.vjs-default-skin .vjs-fullscreen-control {
    display: none;  
}

video-js.cssがリンクされた後にページのCSSをリンクできない場合は、display: none !important;代わりに使用できます。これでうまくいくはずです。ただし、最後の手段として！importantのみを使用します。

注：上記では、再生が押された後の一時停止ボタンや大きな再生ボタンは削除されません。それらを削除するときは、UIに関する考慮事項がさらにあります。うまくいけば、これがVideo.jsコントロールバーのカスタマイズに役立つことを願っています。

于 2013-06-28T18:48:36.830 に答える
4

私が見つけた最も簡単な方法は、クラスのプロトタイプをそのように変更することです。

入れる

<script>
    _V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>

直後の

<script src="http://vjs.zencdn.net/c/video.js"></script>

これにより、再生トグルボタン以外のすべてのコントロール（継続時間、残り時間、シークバーを含む）が削除されます

他のものが必要な場合は、デフォルトから選択することができます（これらのいくつかはデフォルトのスキンに非表示に設定されています）

options: {
    components: {
        "playToggle": {},
        "fullscreenToggle": {},
        "currentTimeDisplay": {},
        "timeDivider": {},
        "durationDisplay": {},
        "remainingTimeDisplay": {},
        "progressControl": {},
        "volumeControl": {},
        "muteToggle": {}
    }
}

または、gitハブhttps://github.com/zencoder/video-js/blob/master/src/controls.jsのcontrols.jsファイルを調べ ます

于 2012-11-29T21:25:59.567 に答える
2

controlBarアイテムを表示/非表示にするオプションもあるようです。data-setup

コンポーネントは https://github.com/videojs/video.js/blob/stable/docs/guides/components.md
にリストされ ており、オプションの説明はhttps://github.com/videojs/video.js/blobにあります。 /stable/docs/guides/options.md

<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>

次のcontrolBarように渡されます。

data-setup='{ "controlBar": { "muteToggle": false } }'

編集：コメントどおり、childrenforの動作optionsが簡略化および変更されました。ドキュメントも参照してください：https ：//github.com/videojs/video.js/blob/master/docs/guides/options.md#component-options Forこれらの変更の背景とタイミングについては、https：//github.com/videojs/video.js/issues/953をご覧ください。

大きな再生ボタンのcssセレクターは

.vjs-default-skin .vjs-big-play-button

ただし、再生オプションを削除するときは、代替手段または適切な設定があることを確認してください（;

私はデフォルトでコントロールを非表示にしているように見えます（？）

于 2015-01-08T17:13:35.253 に答える
1

これにより、すべてのコントロールバーが削除されますが、大きな再生ボタンは削除されません

.vjs-default-skin.vjs-has-started .vjs-control-bar {
visibility: hidden;
}
于 2013-10-30T07:57:35.927 に答える
1

再生ボタンも削除し、ビデオを再生してクリックを停止したい場合は、私が採用したこの代替ソリューションを確認してください。

<head>あなたの（または不可能な場合は他の場所に）挿入します...

<script type="text/javascript">
    function vidplay(me) {
       if (me.paused) {
          me.play();
       } else {
          me.pause();
       }
    }
</script>

次に、ビデオから呼び出します。

<video onclick="javascript: vidplay(this)" ...>

videoタグにコントロールを設定しないでください。明らかにこの方法で、リンクされたソリューションが行う独自のカスタムボタンをいじることができます。

于 2015-01-21T21:38:52.123 に答える