Help us understand the problem. What is going on with this article?

[Video.js] JavaScriptで動画を再生する

はじめに

JavaScriptで動画を再生するライブラリを紹介します。

Video.js
https://videojs.com/

今回使用したJavaScriptライブラリのバージョンは下記の通りです。

JavaScriptライブラリ
Video.js: 7.7.5

Video.jsとは

Video.js とは JavaScriptのライブラリの一つ。JavaScriptでは、video タグを使用して動画を再生する機能があります。動画の再生や停止、シークバーの操作、フルスクリーン切り替えなどをコントロールするUIは、1から実装する必要があります。Video.js では、これらのUIを提供するライブラリです。

ライブラリの読み込み

video.js を参照します。

<script src="../lib/video.js"></script>

基本的な使い方

videojs 関数を宣言します。
第1引数にIDを指定します。
第2引数にoptionを指定します。設定例は下記の通りです。

let video = videojs('video1', {
    width: 640, // 幅
    height: 360, // 高さ
    autoplay: false, // 自動再生
    loop: false, // ループ再生
    controls: true, // コントロール制御表示
    preload: 'auto', // 読み込み制御
    poster: '../video/thumb.png', // サムネイル表示
});

src 関数でリソースを指定します。

video.src({
    type: 'video/mp4', // mimetype
    src: '../video/Bullfinch.mp4' // ビデオファイルパス 
});

on 関数でイベントリスナーを登録します。配列で複数登録することが可能です。

video.on(['loadstart', 'loadedmetadata', 'loadeddata', 'play', 'playing', 'pause', 'suspend', 'seeking', 'seeked', 'waiting', 'canplay', 'canplaythrough', 'ratechange', 'ended', 'emptied', 'error', 'abort'], (e) => {
    console.log(`EVENT: ${e.type}`);
});

さいごに

デモはこちら
ソースファイルはこちら

以上です。

yun_bow
サービス志向エンジニアです。プログラミングを使ったモノづくりが好きです。AWS、Python、GO言語を勉強中。 こちらで投稿した記事は、所属会社の公式見解を示すものではないです。
pa-rk
Webアプリ、スマホアプリの開発を手掛ける技術者集団です。
https://www.pa-rk.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした