PLYRを加える方法.あなたのウェブサイトへのio

5954 ワード
webdev beginners video plyr テキストリンク

非常に初心者フレンドリーなガイドをどのように驚くべきオープンソースのplyrを追加するには、ステップバイステップにようこそ。あなたのウェブサイトへのIOビデオプレーヤー。


あなたは更なる指示のために公式ウェブサイトを訪問することができます:Plyr.io

最初に：必要なすべてのファイルを含むフォルダーを作成します。


このフォルダの中に3つの基本的なファイルインデックスを作成します.HTMLスタイル.CSSスクリプト.js

1 .インデックスの内部。HTMLファイルの作成


を追加し、video 内部タグbody 任意のタグid 好きです.
<video id="plyr">

</video>
そのIDを覚えておいてください.

2 .ビデオタグの中にポスター=「' image . jpg」属性を追加します。次のようになります。

<video id="plyr" poster="image.jpg"></video>

3 .ビデオタグの中にあなたのビデオを追加するには、ソースタグを追加します。


その後source tagこれらの属性を追加します.
• src="video.mp4" 閉じるこの動画はお気に入りから削除されています.
• type="video/mp4" ビデオタイプsee all types here.
今までのように見えます.
<video
        id="plyr"
        poster="image.jpg"
      >
        <source
          src="video.mp4"
          type="video/mp4"
        />
</video>
別の解像度で1つのビデオがある場合はsize="" 属性、この属性を使用すると、ビデオの解像度を指定できます.(YouTubeで見つけたもののように).今までのように見えます.
<video
        id="plyr"
        poster="image.jpg"
      >
        <source
          src="video1.mp4"
          type="video/mp4"
          size="1080"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="720"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="480"
        />
</video>
キャプションがあれば、track 内部タグvideo 次に、これらの属性を追加します.
• kind="captions"• label="English"• src="captions.vtt" あなたのキャプションを見つけます.
• srclang="en"つ以上の言語を追加することができますtrack これらの属性を持つタグ
• kind="captions"• label="language"• src="captions2.vtt" あなたのキャプションを見つけます.
• srclang="##" find all languages srclang from here
今までのように見えます.
<video
        id="plyr"
        poster="image.jpg"
      >
        <source
          src="video1.mp4"
          type="video/mp4"
          size="1080"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="720"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="480"
        />
        <track kind="captions" label="English" src="" srclang="en" default />
        <track kind="captions" label="Arabic" src="" srclang="ar" />
</video>
デフォルトのキャプションを作成するにはdefault .
ファイルを保存し、インデックスを使用します.現在のHTMLファイル🙌

第2：CSSとJavaScriptファイルの調整。


1 .スタイルの内側。CSSファイルは、基本的なスタイルを作成するか、あなたのウェブサイトをスタイルしたい。


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ファイルを保存します.そして、それはCSS

2 .スクリプトの中。以下のようなプロジェクトへのPLYRライブラリのインポート

const player = new Plyr('#video-tag-id');我々が我々に加えたIDを目標とすることに注意してくださいvideo 上記のタグ:私たちの場合はconst player = new Plyr('#plyr');ファイルを保存します.そしてJavaScriptで

第3：すべてのファイルをHTMLファイルにリンクする。


1 . cssファイル: headタグでこれらのリンクを追加する

<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />次のようになります.
  <head>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
  </head>

2 . jsファイル: bodyタグの末尾にこれらのリンクを同じ順序で追加します。

<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script> <script src="script.js"></script>次のようになります.
  <body>




    <script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
    <script src="script.js"></script>
  </body>
それで🎉 あなたのウェブサイトは今すぐにplyrを実行する必要があります.

最後のステップ：深く、または、他のウェブサイトのためにこのウェブサイトへの方法


1https://www.netlify.com/


フリーアカウントの作成



3 .ログイン後サイトに移動



プロジェクトの出力フォルダをドラッグ&ドロップする



そして今、あなたはインターネット上の誰とでもあなたの仕事を共有することができます.
はい、こちらCodePen project .
ありがとう!
Anaconda仮想環境の作成pytorch-GPUのインストール
私の最初の文章