Video.js

3ステップで試す

1. 1

   Video.js 8.24.1を一時ディレクトリへ導入する

   確認対象のv8系packageを固定し、既存アプリから分離して試します。

   demo=$(mktemp -d "${TMPDIR:-/tmp}/videojs.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact video.js@8.24.1コピー
2. 2

   Video.jsを読み込む最小HTMLを作る

   READMEのQuick Startに沿ってvideo-js classとdata-setupを指定し、導入したpackageのCSSとJavaScriptを読み込みます。

   printf "%s\n" '<!doctype html>' '<meta charset="utf-8">' '<link rel="stylesheet" href="./node_modules/video.js/dist/video-js.css">' '<video id="my-player" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">' '<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">' '</video>' '<script src="./node_modules/video.js/dist/video.min.js"></script>' > index.htmlコピー
3. 3

   ブラウザでHTMLを開いてプレイヤーを確認する

   index.htmlをブラウザで開き、Video.jsのcontrolsを持つプレイヤーが表示されることを確認します。サンプル動画の取得にはネットワーク接続が必要です。

   index.htmlコピー

Built with

• JavaScript

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• Tippy.js12,240 Stars

  共通タグ 3件 · 同じ言語

  tooltip・popover・dropdownをPopperベースで配置し、hover・focus・click操作へ追加する

  JavaScript
• Stylelint11,526 Stars

  共通タグ 3件 · 同じ言語

  CSSのerrorとconventionを100以上のrule・plugin・shareable configで継続的に検査する

  JavaScript
• Stylus11,333 Stars

  共通タグ 3件 · 同じ言語

  indented syntaxと通常のCSS styleを同じcompilerで扱うexpressiveなstylesheet language

  JavaScript
• i18next8,637 Stars

  共通タグ 3件 · 同じ言語

  翻訳キー・複数形・補間・resource loadingをUI frameworkから切り離すi18n core

  JavaScript
• melonJS6,401 Stars

  共通タグ 3件 · 同じ言語

  WebGPU・WebGL 2・Canvasを同じAPIで扱い、ブラウザ向け2D／2.5Dゲームを組み立てるエンジン

  JavaScript
• DOM Testing Library3,335 Stars

  共通タグ 3件 · 同じ言語

  ユーザーが要素を見つける方法に近いDOM queryでUIをテストする

  JavaScript