ビデオプレーヤーのスタイルをカスタマイズするにはどうすればよいですか?

この記事ではビデオプレーヤーのスタイルをカスタマイズする方法を詳しく説明していますので、お役に立てれば幸いです。

DIY

この記事は HTML5 Video API に基づいており、Web ビデオ プレーヤーのスタイルをカスタマイズします。

実際、ネイティブのビデオタグスタイルは非常に優れていますが、視覚体験は人それぞれ異なるため、ネイティブスタイルの変更が必要になる場合があります。

その後、メイクをしてください。薄化粧、薄化粧。

【コードはこちら】

<video class="ppq-video video-hidden" src="https://zhuanjia4v-1252768022.cossh.myqcloud.com/hualv/437D2592787911E8862FD89EF30F789D.mp4"
       webkit-playsinline="true"
       playsinline="true"
       x-webkit-airplay="allow" // 使video支持ios的AirPlay功能，需要终端支持
       x5-playsinline 
       poster="https://img02.sogoucdn.com/app/a/200692/42345752787911E8BB8FD89EF30F789D?m-wh=960*540" 
    ></video>

Playsinline属性を追加:

webkit-playsinline="true"
playsinline="true"
x5-playsinline

このPlaysinline属性は、ブラウザ自体によって実装されたビデオスタイルを使用するのではなく、ブラウザのWebビューにビデオをインライン化しますが、一部のブラウザはこれを認識しませんつまり、独自のものを使用する必要があります。たとえば、UC を使用する場合は、ホワイトリストを構成するために UC が必要です。一部のブラウザーはそれをサポートしておらず、ホワイトリストさえありません。

Tencent の x5 およびその他のブラウザーのこれらの属性については、記事 [Tencent ブラウジング サービス - H5 同一レイヤー プレーヤー アクセス仕様] を参照してください。

使用

$(selector).initVideoPlayer();  // select 为video元素

プレーヤー スタイルは、git コード プロジェクトのデモ フォルダーで別途入手できます。 css は、自分の好きなもの、またはプロダクト マネージャーが好むものに変更できます。

関連する推奨事項:

vue-video-player カスタム プレーヤーを作成する

vue-video-player プレーヤーをカスタマイズする手順の詳細な説明

以上がビデオプレーヤーのスタイルをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。