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

Dplayer: JavaScript open sources media playerの使用法

More than 1 year has passed since last update.

Screen Shot 2018-03-13 at 10.29.00.png

Screen Shot 2018-03-13 at 10.29.00.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・実装

<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・字幕

Screen Shot 2018-03-30 at 10.38.36.png

Implementation・実装

<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・スクリーンキャプチャ&ビデオポスター

Screen Shot 2018-03-29 at 10.15.37.png

Implementation・実装

<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 ・ シークバープレビュー

Screen Shot 2018-03-30 at 15.23.50.png

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

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

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秒です。

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でモンタージュファイルを生成する

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

Result結果
image.png

Implementation・実装

<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

Screen Shot 2018-03-30 at 9.59.30.png

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

Implementation・実装

<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

Screen Shot 2018-03-30 at 16.30.10.png

Implementation・実装

<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をサポートしていません。
Screen Shot 2018-03-29 at 10.27.25.png

Implementation・実装

<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

Implementation・実装

<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.
注意: ライブコメントについては、Dplayerのホームページを参照してください。

Custom context menu (Right click)・カスタムコンテキストメニュー『右クリック』

Screen Shot 2018-03-29 at 12.41.25.png

Implementation・実装

<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でウォーターマークの位置を調整することができます。

Screen Shot 2018-03-29 at 12.23.05.png

Implementation・実装

<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/

mehdi
cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス
https://cloudpack.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
ユーザーは見つかりませんでした