CSSを使用したHTML5ビデオプレーヤーの作成とカスタマイズ

HTML5は、ビデオアセットをレンダリングするためのデフォルトのビデオプレーヤーを提供します。ただし、CSSを使用すると、ビデオプレーヤーのスタイルを微調整してカスタマイズし、好みに合わせたり、Webサイトのテーマやスタイルに合わせたりすることができます。

この記事では、CSSを使用してHTML5ビデオプレーヤーをカスタマイズし、次のアプリのデザインにシームレスに溶け込むビデオプレーヤーを作成する方法を紹介します。

この記事を続けるには、DOM操作とイベントリスニングの実用的な理解に加えて、HTML、CSS、およびJavaScriptの実用的な知識が必要です。

また、最高のパフォーマンスを得るには、最新バージョンのブラウザまたはChromeブラウザを使用することをお勧めします。

HTML5ビデオプレーヤーとは何ですか？

HTML5のビデオプレーヤーは、 Adobe Flash Playerのより互換性のある代替として作成されたHTML5ストリーミング技術です。これにより、放送局はHLS（HTTPSライブストリーミング）プロトコルを介してWebプラットフォーム上でビデオ資産をストリーミングし、CDN（コンテンツ配信ネットワーク）からコンテンツをフェッチできます。

すべての主要なブラウザとオペレーティングシステムは、HTML5ビデオプレーヤーをサポートしています。

HTML5ビデオプレーヤーをカスタマイズするとはどういう意味ですか？

HTML5ビデオプレーヤーをカスタマイズするということは、デフォルトの外観やスタイルを好みに合わせて変更することを意味します。これは、選択したビデオプレーヤーをレンダリングするDOM要素の新しいスタイルシートを作成することによって行われます。

カスタマイズされたHTML5ビデオプレーヤーの使用例と実際の例

カスタマイズされたHTML5ビデオプレーヤーの実際の例は、YouTube、Cloudinaryビデオプレーヤー、JWPlayer、およびビデオJSで見つけることができます。これらの各Webサイトまたはフレームワークは、CSSの機能を利用して、ビデオをカスタマイズしたり、ユーザーが同じことを実行できるようにします。

ご覧のとおり、カスタムビデオプレーヤーには多くのユースケースがあります。特に、ビデオが主な機能であるアプリ（YouTubeなど）ではそうです。次のチュートリアルでは、独自のHTML5ビデオプレーヤーを作成し、アプリのネイティブ部分のようにカスタマイズする方法を学習します。

新しいHTML5ビデオプレーヤーを作成する方法

新しいHTML5ビデオプレーヤーを作成するには、新しいプロジェクトフォルダーを作成する必要があります。フォルダ内に。というHTMLファイルを作成します。index.html

ファイルに次のコードを入力します。index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <video src="https://res.cloudinary.com/codelife/video/upload/v1637805738/intro_l5ul1k.mp4"></video>
</body>
</html>

上記のコードvideoでは、本文にタグが付いたHTMLドキュメントがあります。また、ソースとしてビデオURLを渡しました。

このWebページをブラウザでプレビューすると、次のように表示されます。

上の画像では、HTML5ビデオプレーヤーは、ビデオプレーヤーを機能させるために必要なパラメーターを設定していないため、操作できないビデオをレンダリングします。

これを修正するには、videoタグに属性を追加してみましょう。videoHTMLドキュメントのタグを次のように置き換えます。

<video 
  src="https://res.cloudinary.com/codelife/video/upload/v1637805738/intro_l5ul1k.mp4" controls autoplay loop muted width="400px" height="300px" ></video>

上記のコードcontrolsでは、ビデオプレーヤーのデフォルトのコントロールを表示するために追加しました。デフォルトではに設定されていますtrue（つまりcontrols、と同じです）。またはをその値としてのみ受け入れます。controls="true"truefalse

autoplay動画が読み込まれた直後に再生を開始するかどうかを決定するために使用されます。すべての新しいビデオ要素には、属性falseとして含めるまでのデフォルトの自動再生値がautoplayあります。

loopビデオが終了したときにビデオを再開するかどうかを決定するために使用されます。すべての新しいビデオ要素には、デフォルトのループ値がありfalseます。

mutedビデオをオーディオで再生するかどうかを決定するために使用されます。すべての新しいビデオ要素には、デフォルトのミュート値がありfalseます。

最後に、widthそしてheight映像の水平方向と垂直方向のサイズを設定します。標準コントロール付きのビデオのGIF

HTML5ビデオプレーヤーのカスタマイズ

プレーヤーをカスタマイズするには、2つの追加ファイルを作成する必要があります：と。script.jsstyle.css

Script.jsここでビデオのコントロールの機能を記述し、ここでビデオのスタイルシートを記述します。2つのファイルの内容を内部に書き込むことはできますが、それではコードが長くなり、乱雑になります。style.cssindex.html

の内容を次のコードに置き換えます。これは、カスタマイズ前のビデオの構造になります。index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="container">
        <video onclick="play(event)" src="https://res.cloudinary.com/codelife/video/upload/v1637805738/intro_l5ul1k.mp4" id="video"></video>
        <div class="controls">
            <button onclick="play(event)"><i class="fa fa-play"></i><i class="fa fa-pause"></i></button>
            <button onclick="rewind(event)"><i class="fa fa-fast-backward"></i></button>
            <div class="timeline">
                <div class="bar">
                    <div class="inner"></div>
                </div>
            </div>
            <button onclick="forward(event)"><i class="fa fa-fast-forward"></i></button>
            <button onclick="fullScreen(event)"><i class="fa fa-expand"></i></button>
            <button onclick="download(event)"><i class="fa fa-cloud-download"></i></button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

上記のコードには、カスタムスタイルシート（）とFont AwesomeCDNリンクが含まれています。次に、コンテナdivを作成しました。ここには、ビデオと以前に追加したすべてのコントロールが含まれています。style.css

コントロールdivには、ビデオの再生状態を切り替えるボタン、ビデオの現在の時刻を前後に切り替えるボタン、フルスクリーンでビデオをプレビューするボタン、ダウンロード可能なものとしてビデオを開くボタンがあります。ファイル、およびビデオタイムラインの現在の位置を示すdiv。

次に、スタイルシートを作成します。スタイルシートを使用すると、セレクターを使用して特定のオブジェクトを参照し、カスタマイズする各プロパティに新しい属性を割り当てることで、ビデオプレーヤーのデフォルトのスタイルを変更できます。

これを行うには、ファイル内に次のコードを入力します。style.css

.container {
    position: relative;
    display: flex;
    width: max-content;
    height: max-content;
    justify-content: center;
    align-items: center;
}
.container #video {
    width: 600px;
    height: 400px;
    border-radius: 20px;
}
.container .controls {
    position: absolute;
    bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    opacity: 0.2;
    transition: opacity 0.4s;
}
.container:hover .controls {
    opacity: 1;
}
.container .controls button {
    background: transparent;
    color: #fff;
    font-weight: bolder;
    text-shadow: 2px 1px 2px #000;
    border: none;
    cursor: pointer;
}
.container .controls .timeline {
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
    border-right: 3px solid #ccc;
    border-left: 3px solid #ccc;
}
.container .controls .timeline .bar{
    background: rgb(1, 1, 65);
    height: 4px;
    flex: 1;
}
.container .controls .timeline .bar .inner{
    background: #ccc;
    width: 0%;
    height: 100%;
}
.fa {
    font-size: 20px !important;
}

このファイルでは、コンテナの位置がrelative。であることがわかります。これは、その中の他の要素の位置を制御するためのものです。

controlsクラスをととしてdivの位置を設定します。これにより、ビデオコンテナの下部からdiv40pxが配置されます。アイコンのフォントサイズも指定しました。position: absolutebottom: 40pxcontrols!important

次に、ビデオプレーヤーには、再生、一時停止、フルスクリーンボタンなどの機能に加えて、ユーザーがダウンロード、巻き戻し、転送する機能が必要です。これらの機能により、ビデオプレーヤーがインタラクティブになります。

次のコードを入力します：script.js

// Select the HTML5 video
const video = document.querySelector("#video")
// set the pause button to display:none by default
document.querySelector(".fa-pause").style.display = "none"
// update the progress bar
video.addEventListener("timeupdate", () => {
    let curr = (video.currentTime / video.duration) * 100
    if(video.ended){
        document.querySelector(".fa-play").style.display = "block"
        document.querySelector(".fa-pause").style.display = "none"
    }
    document.querySelector('.inner').style.width = `${curr}%`
})
// pause or play the video
const play = (e) => {
    // Condition when to play a video
    if(video.paused){
        document.querySelector(".fa-play").style.display = "none"
        document.querySelector(".fa-pause").style.display = "block"
        video.play()
    }
    else{
        document.querySelector(".fa-play").style.display = "block"
        document.querySelector(".fa-pause").style.display = "none"
        video.pause()
    }
}
// trigger fullscreen
const fullScreen = (e) => {
    e.preventDefault()
    video.requestFullscreen()
}
// download the video
const download = (e) => {
    e.preventDefault()
    let a = document.createElement('a')
    a.href = video.src 
    a.target = "_blank"
    a.download = ""
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}
// rewind the current time
const rewind = (e) => {
    video.currentTime = video.currentTime - ((video.duration/100) * 5)
}
// forward the current time
const forward = (e) => {
    video.currentTime = video.currentTime + ((video.duration/100) * 5)
}

上記のコードスニペットvideoでは、スクリプトファイルのさまざまな関数でビデオを識別するために使用される定数を作成しました。

pauseアイコンがに設定され、デフォルトで。次に、ビデオでイベントリスナーを実行して、を確認しました。更新するたびに、次の式を使用して、内側のプログレスバーの幅をビデオの合計時間の現在の時間のパーセントに更新します。display: nonetimeupdate

let curr = (video.currentTime / video.duration) * 100

次にplay、ビデオの再生状態を切り替えて表示するボタンを決定するために使用するという関数を作成しました。このために、我々は時に再生ボタンをクリックすると、いくつかのロジック書いているが、我々は、各項目のための反対を行う他に、一時停止ボタンを非表示にし、再生ボタンを表示し、動画を再生します。video.pausedtrue

フルスクリーン関数の場合、ビデオ要素で関数をトリガーするだけです。ダウンロード機能では、新しいタグを作成し、ビデオURLを属性として割り当てました。requestFullscreen()ahref

次に、ダウンロード可能なビデオを新しいタブで開くtargetよう_blankに設定します。次に、関数を使用して作成した新しいリンクをプログラムでクリックしました。click()

また、ビデオを巻き戻しまたは転送する関数を作成する必要があります。これは、次のロジックを使用して実行できます。

巻き戻しの場合：

video.currentTime = video.currentTime - ((video.duration/100) * 5)

フォワードの場合：

video.currentTime = video.currentTime + ((video.duration/100) * 5)

ビデオプレーヤーの最終結果結論

この記事では、HTML5ビデオプレーヤーをカスタマイズすることの意味と、CSSを使用してそれを自分で行う方法を学びました。ただし、自分のUIとビデオをさらにうまくブレンドするために、機能を追加することにいつでも挑戦することができます。

ご不明な点がございましたら、下のコメント欄にご遠慮なくお寄せください。

リンク: https://blog.logrocket.com/creating-customizing-html5-video-player-css/

#css

HTML5ビデオプレーヤーとは何ですか？

すべての主要なブラウザとオペレーティングシステムは、HTML5ビデオプレーヤーをサポートしています。

HTML5ビデオプレーヤーをカスタマイズするとはどういう意味ですか？

カスタマイズされたHTML5ビデオプレーヤーの使用例と実際の例

新しいHTML5ビデオプレーヤーを作成する方法

ファイルに次のコードを入力します。index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <video src="https://res.cloudinary.com/codelife/video/upload/v1637805738/intro_l5ul1k.mp4"></video>
</body>
</html>

上記のコードvideoでは、本文にタグが付いたHTMLドキュメントがあります。また、ソースとしてビデオURLを渡しました。

このWebページをブラウザでプレビューすると、次のように表示されます。

これを修正するには、videoタグに属性を追加してみましょう。videoHTMLドキュメントのタグを次のように置き換えます。

<video 
  src="https://res.cloudinary.com/codelife/video/upload/v1637805738/intro_l5ul1k.mp4" controls autoplay loop muted width="400px" height="300px" ></video>

最後に、widthそしてheight映像の水平方向と垂直方向のサイズを設定します。標準コントロール付きのビデオのGIF

HTML5ビデオプレーヤーのカスタマイズ

プレーヤーをカスタマイズするには、2つの追加ファイルを作成する必要があります：と。script.jsstyle.css

の内容を次のコードに置き換えます。これは、カスタマイズ前のビデオの構造になります。index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="container">
        <video onclick="play(event)" src="https://res.cloudinary.com/codelife/video/upload/v1637805738/intro_l5ul1k.mp4" id="video"></video>
        <div class="controls">
            <button onclick="play(event)"><i class="fa fa-play"></i><i class="fa fa-pause"></i></button>
            <button onclick="rewind(event)"><i class="fa fa-fast-backward"></i></button>
            <div class="timeline">
                <div class="bar">
                    <div class="inner"></div>
                </div>
            </div>
            <button onclick="forward(event)"><i class="fa fa-fast-forward"></i></button>
            <button onclick="fullScreen(event)"><i class="fa fa-expand"></i></button>
            <button onclick="download(event)"><i class="fa fa-cloud-download"></i></button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

これを行うには、ファイル内に次のコードを入力します。style.css

.container {
    position: relative;
    display: flex;
    width: max-content;
    height: max-content;
    justify-content: center;
    align-items: center;
}
.container #video {
    width: 600px;
    height: 400px;
    border-radius: 20px;
}
.container .controls {
    position: absolute;
    bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    opacity: 0.2;
    transition: opacity 0.4s;
}
.container:hover .controls {
    opacity: 1;
}
.container .controls button {
    background: transparent;
    color: #fff;
    font-weight: bolder;
    text-shadow: 2px 1px 2px #000;
    border: none;
    cursor: pointer;
}
.container .controls .timeline {
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
    border-right: 3px solid #ccc;
    border-left: 3px solid #ccc;
}
.container .controls .timeline .bar{
    background: rgb(1, 1, 65);
    height: 4px;
    flex: 1;
}
.container .controls .timeline .bar .inner{
    background: #ccc;
    width: 0%;
    height: 100%;
}
.fa {
    font-size: 20px !important;
}

このファイルでは、コンテナの位置がrelative。であることがわかります。これは、その中の他の要素の位置を制御するためのものです。

次のコードを入力します：script.js

// Select the HTML5 video
const video = document.querySelector("#video")
// set the pause button to display:none by default
document.querySelector(".fa-pause").style.display = "none"
// update the progress bar
video.addEventListener("timeupdate", () => {
    let curr = (video.currentTime / video.duration) * 100
    if(video.ended){
        document.querySelector(".fa-play").style.display = "block"
        document.querySelector(".fa-pause").style.display = "none"
    }
    document.querySelector('.inner').style.width = `${curr}%`
})
// pause or play the video
const play = (e) => {
    // Condition when to play a video
    if(video.paused){
        document.querySelector(".fa-play").style.display = "none"
        document.querySelector(".fa-pause").style.display = "block"
        video.play()
    }
    else{
        document.querySelector(".fa-play").style.display = "block"
        document.querySelector(".fa-pause").style.display = "none"
        video.pause()
    }
}
// trigger fullscreen
const fullScreen = (e) => {
    e.preventDefault()
    video.requestFullscreen()
}
// download the video
const download = (e) => {
    e.preventDefault()
    let a = document.createElement('a')
    a.href = video.src 
    a.target = "_blank"
    a.download = ""
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}
// rewind the current time
const rewind = (e) => {
    video.currentTime = video.currentTime - ((video.duration/100) * 5)
}
// forward the current time
const forward = (e) => {
    video.currentTime = video.currentTime + ((video.duration/100) * 5)
}

上記のコードスニペットvideoでは、スクリプトファイルのさまざまな関数でビデオを識別するために使用される定数を作成しました。

let curr = (video.currentTime / video.duration) * 100

また、ビデオを巻き戻しまたは転送する関数を作成する必要があります。これは、次のロジックを使用して実行できます。

巻き戻しの場合：

video.currentTime = video.currentTime - ((video.duration/100) * 5)

フォワードの場合：

video.currentTime = video.currentTime + ((video.duration/100) * 5)

ビデオプレーヤーの最終結果結論

ご不明な点がございましたら、下のコメント欄にご遠慮なくお寄せください。

リンク: https://blog.logrocket.com/creating-customizing-html5-video-player-css/

#css

CSSを使用したHTML5ビデオプレーヤーの作成とカスタマイズ

HTML5ビデオプレーヤーとは何ですか？

HTML5ビデオプレーヤーをカスタマイズするとはどういう意味ですか？

カスタマイズされたHTML5ビデオプレーヤーの使用例と実際の例

新しいHTML5ビデオプレーヤーを作成する方法

What is GEEK

Buddha Community