Dplayer: JavaScript open sources media playerの使用法





<img width="150" alt="Screen Shot 2018-03-13 at 10.29.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/e4ac386b-b34f-baab-bfda-795083e5a912.png">


<img width="616" alt="Screen Shot 2018-03-13 at 10.29.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/5142625f-a1e2-383f-e5c8-ddabe63c2c9e.png">


##はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

In my opinion ***Dplayer*** is a really interesting player  and  I would like to show you common use cases.
***Dplayer*** は興味深いプレイヤーなので、一般的な使用法を説明します。

##Copyrights of videos
**Big Buck Bunny**
© copyright 2008, Blender Foundation | www.bigbuckbunny.org
**Sintel**
© copyright Blender Foundation | www.sintel.org


##What is Dplayer ・ Dplayerとは
**Dplayer** is an open sources JavasScript media player for the web. 
**Dplayer** はウェブ用のオープンソースJavascriptメディアプレーヤーです。

##Objective・目的
Learning how to use Dplayer through simple examples.
Dplayerの簡単な例を学ぶこと。

#Simple example・ 簡単な実装
###Implementation・実装

```html
<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      video: {
        url: 'sintel_trailer-720p.mp4',
        type: 'auto'
      },
    });
  </script>
</body>

```

#subtitles・字幕
<img width="1069" alt="Screen Shot 2018-03-30 at 10.38.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/081189c2-703f-cf4c-cdd4-956b5087589a.png">

###Implementation・実装

```html
<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- hls -->
  <script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      video: {
        url: '//bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
        type: 'hls'
      },
      subtitle: {
        url: '//raw.githubusercontent.com/elyseko/web-vtt-example/master/src/captions/sintel-en-us.vtt',
        type: 'webvtt',
        fontSize:'30px',
        bottom: '10%',
        color: '#ee1289'
      }
    });
  </script>
</body>
```

#Screen Capture & movie poster・スクリーンキャプチャ＆ビデオポスター
<img width="933" alt="Screen Shot 2018-03-29 at 10.15.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/d975d0c6-1a52-60ac-f337-d82334c48d7e.png">

###Implementation・実装

```html
<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- hls -->
 <script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      screenshot:true,
      video: {
        url: '//bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
        type: 'hls',
        pic: 'sintel_poster.jpeg'
      },
    });
  </script>
</body>

```

#Seekbar preview ・ シークバープレビュー
<img width="1067" alt="Screen Shot 2018-03-30 at 15.23.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/6ac40212-6a4f-5d6a-d61c-a7358f2beb42.png">

***N.B:*** The final montage file must be created with exactly 100 thumbnails.
***注意:*** 最終的なモンタージュファイルは正確に100個のサムネイルで作成する必要があります。

###Take screenshots with FFMPEG・ FFMPEGで画面キャプチャがする

```bash
ffmpeg -i sintel_trailer-720p.mp4 -f image2 -bt 20M -vf fps=100/VIDEO_LENGTH_IN_SEC -aspect 16:9 %03d.jpg
```
For example, Sintel trailer is 52 seconds length.
たとえば、Sintelの予告編の長さは52秒です。

```bash
ffmpeg -i sintel_trailer-720p.mp4 -f image2 -bt 20M -vf fps=100/52 -aspect 16:9 %03d.jpg
```

###Generate montage file with ImageMagick・ ImageMagickでモンタージュファイルを生成する

```bash
montage *jpg -tile x1 -geometry 160x montage.jpg
```

***Result*** ・ ***結果***
![image.png](https://qiita-image-store.s3.amazonaws.com/0/229807/fe8080cf-119a-9315-6170-9a8ac6a226cd.png)

###Implementation・実装
```html
<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      video: {
        url: 'sintel_trailer-720p.mp4',
        type: 'auto',
        thumbnails:'montage.jpg'
      },

    });
  </script>
</body>
```

##WebTorrent
<img width="236" alt="Screen Shot 2018-03-30 at 9.59.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/d75de0fb-67d0-2873-fc51-59cd30b4dbc8.png">


***N.B*** : WebTorrent is based on the WebRTC protocol. Safari does not support WebTorrent yet.
***注意*** ：WebTorrentはWebRTCプロトコルに基づいています。 SafariはまだWebTorrentをサポートしていません。

###Implementation・実装

```html
<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Player Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- WebTorrent  -->
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
  var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4';
  const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: `${torrentId}`,
        type: 'customWebTorrent',
        customType: {
            'customWebTorrent': function (video, player) {
                player.container.classList.add('dplayer-loading');
                const client = new WebTorrent();
                const torrentId = video.src;
                client.add(torrentId, (torrent) => {
                    const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
                    file.renderTo(video, {
                        autoplay: player.options.autoplay
                    }, () => {
                        player.container.classList.remove('dplayer-loading');
                    });
                });
            }
        }
    }
});
  </script>
</body>

```

#HLS
<img width="510" alt="Screen Shot 2018-03-30 at 16.30.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/764fdd30-746f-7eac-f250-6133905a568f.png">

###Implementation・実装

```html
<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- hls -->
  <script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      screenshot: true,
      video: {
        url: '//bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
        type: 'hls'
      },
    });
  </script>
</body>
```

#MPEG-DASH
***N.B:*** iOS does not support MPEG-DASH yet.
***注意：*** iOSはまだMPEG-DASHをサポートしていません。
<img width="1004" alt="Screen Shot 2018-03-29 at 10.27.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/e61db370-6995-72c8-55c8-956b6a16b6e1.png">

###Implementation・実装

```html
<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- dash -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.7/dash.all.min.js"></script>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      video: {
        url: '//rdmedia.bbc.co.uk/dash/ondemand/bbb/2/client_manifest-common_init.mpd',
        type: 'dash'
      },
    });
  </script>
</body>

```



#NicoNico danmaku style (Comments wave)・ニコニコ弾幕コメント波
![Screenshot from 2018-03-10 15-17-58.png](https://qiita-image-store.s3.amazonaws.com/0/229807/89dac994-16db-fbc2-9849-6767205ec9c9.png)

###Implementation・実装

```html
<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      video: {
        url: 'sintel_trailer-720p.mp4',
        type: 'auto'
      },
      //testing credentials
      danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true
      },
    });
  </script>
</body>

```

***N.B:*** For live comments, please refer to the Dplayer [homepage](http://dplayer.js.org/#/home?id=danmaku).
***注意:*** ライブコメントについては、Dplayerの[ホームページ](http://dplayer.js.org/#/home?id=danmaku)を参照してください。




#Custom context menu (Right click)・カスタムコンテキストメニュー『右クリック』
<img width="1255" alt="Screen Shot 2018-03-29 at 12.41.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/ec645a1f-3476-4106-326a-ae47195a4e99.png">

###Implementation・実装

```html
<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      video: {
        url: 'sintel_trailer-720p.mp4',
        type: 'auto'
      },
      contextmenu: [{
          text: 'Dplayer homepage',
          link: 'https://github.com/MoePlayer/DPlayer'
        },
        {
          text: 'Click me & check your logs!',
          click: (player) => {
            console.log(player);
          }
        }
      ]
    });
  </script>
</body>
```
#Watermark・動画にウォーターマーク
Watermark size & position can be adjusted by CSS.
CSSでウォーターマークの位置を調整することができます。

<img width="1264" alt="Screen Shot 2018-03-29 at 12.23.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/1bb4b4ea-e3f5-3975-23bc-62dba1f6eae4.png">

###Implementation・実装

```html

<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      logo:"logo.png",
      video: {
        url: 'sintel_trailer-720p.mp4',
        type: 'auto'
      },
    });
  </script>
</body>

```

#Information sources ・ 情報源
**Player homepage**
https://github.com/MoePlayer/DPlayer
http://dplayer.js.org

**Player Documentation**
http://dplayer.js.org/#/home

**WebTorrent**
https://webtorrent.io/

**Media files**
http://www.bbc.co.uk/rd/blog/2013-09-mpeg-dash-test-streams
http://docs.evostream.com/sample_content/table_of_contents
https://bitmovin.com/mpeg-dash-hls-examples-sample-streams/
http://iandevlin.github.io/mdn/video-player-with-captions/