浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【Vue.js】Video.jsで動画プレイヤーを好きに作る

 HTMLにはvideo要素というものがあります。これにはいくつか素朴なプロパティやイベントがあり、組み合わせて操作、読み込みをすることで多彩な表現ができます。
<video>: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN


 Video.jsはこれをラッピングして多くの機能を簡単に呼び出せるようにしたライブラリです。シークバー等デザインも自由、試せていませんがYoutube, vimeoなどいくつかの動画サイトから簡単に動画を呼び出したり、プレイリストを作ったりするプラグインライブラリも多いらしいです。
Video.js – Make your player yours | Video.js
videojs/video.js: Video.js – open source HTML5 & Flash video player
plugins/index – Video.js: The Player Framework | Video.js
 Video.jsを更にVue.js用にラッピングしたコンポーネントを定義したライブラリ、vue-video-playerがあります。
surmon-china/vue-video-player: 🎞 @videojs component for @vuejs
 Video.jsとVue.jsの仲立ちを見事にこなし、Vue.js的な書き方でVideo.jsを操れます。これを利用した例(vue-video-player中のexamplesの中の一つの改変)が次です。
 例では画面クリックで再生と一時停止の切り替え、各イベントをコンソールに出力、動画の秒をリアルタイムで更新、を実装しています。これを更に改造して動画を描画する部とコントロールする部を完全に別に作ることもできます。

  • この記事いいね! (0)