Clappr: JavaScript media playerの使用法

#Clappr player: JavaScript メディアプレーヤーの使用法
<img width="695" alt="Screen Shot 2018-02-19 at 11.42.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/0e785991-4c81-26af-fbee-e62e912eef81.png">

##はじめに

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

I really like using Clappr and  I would like to show you common use cases.
Clapprを使うことが本当に好きです。一般的な使用法を説明します。

##Copyrights of videos
**Big Buck Bunny**
© copyright 2008, Blender Foundation / www.bigbuckbunny.org
**Sintel**
© copyright Blender Foundation | www.sintel.org
**360 test stream**
© Bitmovin https://bitmovin.com/mpeg-dash-hls-examples-sample-streams/

##What is Clappr ・ Clapprとは
Clappr is an open sources JavasScript media player for the web. It supports desktop & mobile browsers.
Clapprはウェブ用のオープンソースJavascriptメディアプレーヤーです。デスクトップとモバイルブラウザ上で使えます。

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

##A simple implementation ・ 簡単な実装
Sintel movie trailer can be downloaded [here](http://download.blender.org/durian/trailer/).
Sintel映画予告編は[こちらから](http://download.blender.org/durian/trailer/)ダウンロードできます。

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
</head>
<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "sintel_trailer-720p.ogv",
      parentId: "#player"
    });
  </script>
</body>
```
<img width="642" alt="Screen Shot 2018-02-20 at 10.10.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/21187033-e307-3467-7477-3960e99946a3.png">


###Logging ・ ロギング
<img width="1064" alt="Screen Shot 2018-03-02 at 16.47.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/c327c4b0-bd80-3ce3-b793-282685c979c6.png">


```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    /*
          To enable debug logs, add the following line BEFORE initializing the player
        */
    Clappr.Log.setLevel(Clappr.Log.LEVEL_DEBUG);

    var player = new Clappr.Player({
      source: "sintel_trailer-720p.ogv",
      parentId: "#player",

      //Events logging: first way
      events: {
        onReady: function() {
          console.log("onReady");
        },
        onPlay: function() {
          console.log("onPlay");
        },
      },

    });
    //Events logging: second way
    player.on(Clappr.Events.PLAYER_PLAY, function() {
      console.log("play");
    });
    //Metadata logs
    player.core.getCurrentPlayback().on(Clappr.Events.PLAYBACK_LOADEDMETADATA, function(e) {
      console.log('Metadata: ', JSON.stringify(e));
    });
    //Container logs, fullscreen example
    var container = player.core.getCurrentContainer();
    container.on(Clappr.Events.CONTAINER_FULLSCREEN, function() {
      console.log('fullscreen state changed');
    });
  </script>
</body>

```
**Full list of events・イベントの完全なリスト：**
http://clappr.github.io/classes/Events.html

##Responsive web design ・レスポンシブウェブデザイン
![response.gif](https://qiita-image-store.s3.amazonaws.com/0/229807/5a689323-1e8f-ea4b-7bf9-7bd1c918795a.gif)

Sintel movie trailer can be downloaded [here](http://download.blender.org/durian/trailer/) .

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Responsive plugin -->
    <script type="text/javascript" src="clappr-responsive-container-plugin.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "sintel_trailer-720p.ogv",
      parentId: "#player",
      plugins: {
        container: [ResponsiveContainer]
      }
    });
  </script>
</body>

```

**Alternative way ・別の方法**
***Caution:*** *It does not work with all browsers.*
***注意 :*** *すべてのブラウザで動作するわけではありません。*

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "//docs.evostream.com/sample_content/assets/hls-sintel-abr3/playlist.m3u8",
      parentId: "#player",
      width: '100%',
      height: '100%'
    });
  </script>
</body>
```

###HLS ・HLSの例
```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
</head>
<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "//YOUR_STREAM.m3u8",
      parentId: "#player"
    });
  </script>
</body>
```

##HLS Resolution switcher ・ HLS動画の解像度を変更の例

<img width="654" alt="Screen Shot 2018-03-02 at 17.15.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/c19fc27e-a7f6-527b-39bd-54fe80cbed11.png">


```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Video resolution switcher -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "//YOUR_STREAM.m3u8",
      parentId: "#player",
      plugins: {
        core: [LevelSelector]
      },
      levelSelectorConfig: {
        //Optional : custom labels
        title: '動画品質',
        labels: {
          0: 'Very low',
          1: 'Low ',
          2: 'Medium ',
          3: 'HQ',
          4: 'High',
          5: 'Very high',
          6: 'Extremy high',
          7: 'Highest'
        },
      },
    });
  </script>
</body>

```


##MPEG-DASH ・ MPEG-DASHの例
***N.B:*** *iOS does not support MPEG-DASH yet.*
***注意：*** *iOSはまだMPEG-DASHをサポートしていません。*

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Dash -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/dash-shaka-playback@2.2.1/dist/dash-shaka-playback.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "//vm2.dashif.org/livesim/testpic_2s/Manifest_stpp.mpd",
      parentId: "#player",
      plugins: {
        playback:[DashShakaPlayback]
      },
    });
  </script>
</body>

```

##MPEG-DASH Resolution switcher・MPEG-DASH動画の解像度する場合の例
***N.B:*** *iOS does not support MPEG-DASH yet.*
***注意：*** *iOSはまだMPEG-DASHをサポートしていません。*

<img width="652" alt="Screen Shot 2018-02-22 at 14.45.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/aa9d036a-a231-dcd4-66b5-e2d34b413c04.png">

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Video resolution switcher -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
  <!-- Dash -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/dash-shaka-playback@2.2.1/dist/dash-shaka-playback.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "//rdmedia.bbc.co.uk/dash/ondemand/bbb/2/client_manifest-common_init.mpd",
      parentId: "#player",
      plugins: {
        core: [LevelSelector],
        playback:[DashShakaPlayback]
      },
    });
  </script>
</body>

```

##Mobile browsers・モバイルブラウザの実装

Get a demo iframe snippet code [here](https://iframely.com/domains).
[ここから](https://iframely.com/domains)デモiframeスニペットコードを取得する。

### *playinline* attribute on iPhone・iPhoneの *playinline* 属性

![iphone2.gif](https://qiita-image-store.s3.amazonaws.com/0/229807/d06bc48e-2cdf-4fd1-211a-68f5992fd3f7.gif)


```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Responsive plugin -->
  <script type="text/javascript" src="clappr-responsive-container-plugin.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "sintel_trailer-720p.ogv",
      parentId: "#player",
      plugins: {
        container: [ResponsiveContainer]
      },
      hideMediaControl: false,
      playback: {
        playInline: true,
        recycleVideo: Clappr.Browser.isMobile,
      }
    });
  </script>
  <hr/>

  <h1>iframe example</h1>
  <div class="iframely-embed">
    <div class="iframely-responsive" style="padding-bottom: 100%;">
      <a href="https://gist.github.com/jweir/2719090" data-iframely-url="//cdn.iframe.ly/bbI0"></a>
    </div>
  </div>
  <script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>
</body>


```

##Poster・ポスター
<img width="652" alt="Screen Shot 2018-02-22 at 16.37.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/71b384ed-3feb-b597-3e67-5014cc41dc31.png">

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "sintel_trailer-720p.ogv",
      parentId: "#player",
      poster: "//i.imgur.com/dOnRkz4.jpg",
    });
  </script>
</body>

```

##subtitles・字幕
<img width="654" alt="Screen Shot 2018-02-22 at 14.54.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/8dd6c17c-1326-a9c5-4168-31e0b67e55d8.png"><img width="658" alt="Screen Shot 2018-02-22 at 14.58.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/35d34ab8-6e10-b9ec-de91-8ab14f06dddc.png">


###Case 1・ケース1
*Subtitles are integrated to the stream.*
*字幕はストリームに統合されています。*

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
  var player = new Clappr.Player({
    parentId: '#player',
    source: '//YOUR_STREAM.m3u8'
  });
  </script>
</body>

```

###Case 2 ・ケース2
*Externals subtitles*
*外部字幕*

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
  var player = new Clappr.Player({
    parentId: '#player',
    source: '//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.webm',
    playback: {
    crossOrigin: 'anonymous', // Required if track loaded from another domain
    externalTracks: [
      {lang: 'es', label: 'Spanish', src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-es.vtt'},
      {lang: 'en', label: 'English', src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt'},
      {lang: 'de', label: 'German', src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-de.vtt'}
    ],
  },
  });
  </script>
</body>

```



##Metrics・動画の指標
<img width="908" alt="Screen Shot 2018-03-02 at 18.01.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/f9084a27-7a97-f714-3dfd-cad1e788e833.png">


```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Stats -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/clappr-stats/dist/clappr-stats.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/clappr-nerd-stats/dist/clappr-nerd-stats.min.js"></script>
</head>
<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "//YOUR_STREAM.m3u8",
      parentId: "#player",
      plugins: [ClapprNerdStats, ClapprStats],
      width: '100%',
      height: '100%',
      clapprNerdStats: {
        shortcut: ['command+shift+s', 'ctrl+shift+s'],
        iconPosition: 'top-right' // Values: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'none'
      }
    });
  </script>
</body>
```

##360° videos ・360°動画
*Desktop browsers only.*
*デスクトップブラウザのみ。*
![360.gif](https://qiita-image-store.s3.amazonaws.com/0/229807/65a65244-5b78-b223-1964-4731cead0f43.gif)


Install the plugin with Node.js:
`npm install clappr clappr-video360`

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- 360 video plugin -->
  <script type="text/javascript" charset="utf-8" src="node_modules/clappr-video360/dist/clappr-video360.min.js"> </script>
</head>

<body>
  <div id="player"></div>
  <script>
  var player = new Clappr.Player(
    {
      source: "//YOUR_360_STREAM.m3u8",
      parentId: "#player",
      autoPlay: false,
      plugins: {
        container: [Video360],
      },
    }
  );
  player.getPlugin('click_to_pause').disable();
  </script>
</body>


```

##Seekbar preview ・ シークバープレビュー

In this example, I am using the following video:
この例では、次のビデオを使用しています。
[sintel_trailer-720p.ogv](http://download.blender.org/durian/trailer/sintel_trailer-720p.ogv)

![output.gif](https://qiita-image-store.s3.amazonaws.com/0/229807/d0613a40-c929-0468-0479-27a5a2cb77bd.gif)

###Generating files with a python script・Pythonスクリプトでファイルを生成する
To generate those files, you can use the following **python 2** script:
ファイルを生成するには、次の **Python 2** スクリプトを使用します。
https://github.com/vlanard/videoscripts/blob/master/sprites/makesprites.py

I edited the script with the following options:
以下のオプションを使用します。

```python
USE_SIPS = False #True to use sips if using MacOSX (creates slightly smaller sprites), else set to False to use ImageMagick
THUMB_RATE_SECONDS=1 # every Nth second take a snapshot
THUMB_WIDTH=100 #100-150 is width recommended by JWPlayer; I like smaller files
SKIP_FIRST=True #True to skip a thumbnail of second 1; often not a useful image, plus JWPlayer doesn't seem to show it anyway, and user knows beginning without needing preview
SPRITE_NAME = "sintel.jpg" #jpg is much smaller than png, so using jpg
VTTFILE_NAME = "thumbs.vtt"
THUMB_OUTDIR = "thumbs"
USE_UNIQUE_OUTDIR = False #true to make a unique timestamped output dir each time, else False to overwrite/replace existing outdir
TIMESYNC_ADJUST = -.5 #set to 1 to not adjust time (gets multiplied by thumbRate); On my machine,ffmpeg snapshots show earlier images than expected timestamp by about 1/2 the thumbRate (for one vid, 10s thumbrate->images were 6s earlier than expected;45->22s early,90->44 sec early)
logger = logging.getLogger(sys.argv[0])
logSetup=False
```

Then run the following command ・次のコマンドを実行します。
`python2 makesprites.py sintel_trailer-720p.ogv`

Two files will be generated, the Text Track file & the montage file.
*sintel_trailer-720p_thumbs.vtt* 
*sintel_trailer-720p_thumbs.jpg*

####Montage file example・モンタージュファイルの例
![sintel_trailer-720p_sintel.jpg](https://qiita-image-store.s3.amazonaws.com/0/229807/c6221812-4b97-8135-cc0d-927b9b946c80.jpeg)

####Implementation・実装
```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Thumnail previews -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/clappr.thumbnails-plugin/latest/clappr-thumbnails-plugin.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    /*
      About thumbnails :
      VTT files are not supported at the moment, so we use the "buildSpriteConfig" helper.

      The following values can be found in the vtt file you generated.
    */
    var spriteSheetUrl = "sintel_trailer-720p_sintel.jpg";
    var numThumbs = 51;
    var thumbWidth = 100;
    var thumbHeight = 56;
    var numColumns = 8;
    var timeInterval = 1;
    var thumbs = ClapprThumbnailsPlugin.buildSpriteConfig(spriteSheetUrl, numThumbs, thumbWidth, thumbHeight, numColumns, timeInterval);

    var player = new Clappr.Player({
      source: "sintel_trailer-720p.ogv",
      parentId: "#player",
      plugins: {
        core: [ClapprThumbnailsPlugin]
      },
      allowUserInteraction: true,
      scrubThumbnails: {
        backdropHeight: 64, // set to 0 or null to disable backdrop
        spotlightHeight: 84, // set to 0 or null to disable spotlight
        backdropMinOpacity: 0.4, // optional
        backdropMaxOpacity: 1, // optional
        thumbs: thumbs
      }
    });
  </script>
</body>
```

###Google IMA
Download the plugin from its [homepage](https://github.com/kslimani/clappr-google-ima-html5-preroll/tree/master/dist)
プラグインは[ホームページ](https://github.com/kslimani/clappr-google-ima-html5-preroll/tree/master/dist)からダウンロードしてください。

If you don't have IMA credentials, you can use demo tags.
IMA資格情報がない場合は、デモタグを使用できます。
https://developers.google.com/interactive-media-ads/docs/sdks/html5/tags

![ima2.gif](https://qiita-image-store.s3.amazonaws.com/0/229807/e8089c47-85ee-812b-a716-c52b8e870c76.gif)



```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
  <script type="text/javascript" src="dist/clappr-google-ima-html5-preroll-plugin.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var TAG =
      "//pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=";
    var player = new Clappr.Player({
      source: "//www.streambox.fr/playlists/test_001/stream.m3u8",
      parentId: "#player",
      plugins: [ClapprGoogleImaHtml5PrerollPlugin],
      googleImaHtml5PrerollPlugin: {
        tag: TAG,
        autostart: false,
      },
    });
  </script>
</body>

``` 

###Scrolling text ・ スクロールテキスト

Download ***plugin.css*** & ***plugin.js*** from [plugin's homepage](https://github.com/Lethea/clappr-marquee-overlay).
プラグインの[ホームページ](https://github.com/Lethea/clappr-marquee-overlay)から ***plugin.css*** ＆ ***plugin.js*** をダウンロードしてください。

![scroll3.gif](https://qiita-image-store.s3.amazonaws.com/0/229807/56fbe98b-61e4-f4ea-1347-b3bb0672d047.gif)





```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Scrolling  plugin css -->
  <link rel="stylesheet" href="plugin.css">
  <!-- jQuery -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <!-- jQuery marquee library -->
  <script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Scrolling text plugin -->
  <script type="text/javascript" src="plugin.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "sintel_trailer-720p.ogv",
      parentId: "#player",
      plugins: [MarqueeOverlay],
      autoPlay: true,
      marqueePluginConfig:{
                textContent:"Hello dear Qiita readers !!! Pretty cool huh ?  日本語でもできます。",
                duration:15000,
                direction:'left'
            },
    });
  </script>
</body>

```

###NicoNico danmaku style・ニコニコ弾幕コメント波

Download ***danmaku.min.js*** from plugin's [homepage](https://github.com/weizhenye/Danmaku/tree/master/dist).
プラグインの[ホームページ](https://github.com/weizhenye/Danmaku/tree/master/dist)から  ***danmaku.min.js*** をダウンロードしてください。

***N.B:*** *It's a demo with random comments.*
*For live comments, please refer to the plugin [homepage](https://github.com/weizhenye/Danmaku).*
***注意*** *これはランダムなコメントのデモです。*
*ライブコメントについては、プラグインの[ホームページ](https://github.com/weizhenye/Danmaku)を参照してください。*

![dan2.gif](https://qiita-image-store.s3.amazonaws.com/0/229807/1892c1d2-ad1e-0dd3-9fe5-510dfa16bf72.gif)


```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Danmaku style comments plugin -->
  <script type="text/javascript" src="danmaku.min.js"></script>
  <!-- Responsive plugin -->
  <script type="text/javascript" src="clappr-responsive-container-plugin.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "big_buck_bunny.ogv",
      parentId: "#player",
      exitFullscreenOnEnd: false,
      plugins: {
        container: [ResponsiveContainer]
      },
    });

    //Add an id to the player container
    document.getElementsByClassName('container')[0].id = "my_container";

    //Setting up random comments
    var danmaku = new Danmaku();
    danmaku.init({
      container: document.getElementById('my_container'),
    });

    function sendDanmaku(data) {
      var colors = ['#ffffff', '#ff0000', '#ffff00', '#ff00ff', '#3399ff', '#996633'];
      var textColor = colors[Math.floor(Math.random() * 6)];
      var comment = {
        text: data,
        style: {
          fontSize: '20px',
          color: textColor,
        },
      };
      danmaku.emit(comment);
    }
    setInterval(function() {
      sendDanmaku('time / タイムスタンプ：' + new Date().getTime());
    }, 1000);

    //Resize the danmaku after the container size has changed
    var container = player.core.getCurrentContainer();
    container.on(Clappr.Events.CONTAINER_SETTINGSUPDATE , function() {
      console.log('Container setting updated');
      danmaku.resize();
    });

  </script>
  </script>
</body>

```

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

Download ***clappr-about-menu-plugin.js*** from its [homepage](https://github.com/Espirak/clappr-about-menu-plugin/tree/master/dist).
プラグインの[ホームページ](https://github.com/Espirak/clappr-about-menu-plugin/tree/master/dist)から ***clappr-about-menu-plugin.js*** をダウンロードしてください。

![right2.gif](https://qiita-image-store.s3.amazonaws.com/0/229807/d4b92443-5ff3-8259-9bea-7ac4e00e3c25.gif)



```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- Right click -->
  <script type="text/javascript" src="clappr-about-menu-plugin.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "sintel_trailer-720p.ogv",
      parentId: "#player",
      plugins: {
        core: [AboutMenuPlugin]
      },
      AboutMenuConfig: [{
          name: 'Plugin author',
          link: '//github.com/Espirak/clappr-about-menu-plugin.git',
          onClick: function() {
            console.log('click');
          }
        },
        {
          name: 'Clappr homepage',
          link: '//github.com/clappr/clappr',
        },
        {
          name: 'This link does nothing',
          link: "javascript: void(0)",
        }
      ],
    });
  </script>
</body>

```

###Picture in picture (PIP)・ピクチャーインピクチャー (PIP)
Desktop Safari only for now.
Desktop Safariでのみ動作します。

![pip2.gif](https://qiita-image-store.s3.amazonaws.com/0/229807/8ecb0564-131f-5450-97a5-c86696e3dd1a.gif)



```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
  <!-- PIP plugin -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/clappr-pip-plugin@latest/dist/clappr-pip-plugin.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "//YOUR_STREAM.m3u8",
      parentId: "#player",
      plugins: [ClapprPIPPlugin]
    });
  </script>
</body>

```

###Watermark・動画にウォーターマーク
<img width="657" alt="Screen Shot 2018-02-22 at 16.22.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/948b853e-2f34-74ec-0c63-9e513c375e88.png">

```html
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
</head>

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
      source: "sintel_trailer-720p.ogv",
      parentId: "#player",
      watermark: "//i.imgur.com/86TZdwS.png", position: 'top-right',
      watermarkLink: "//github.com/clappr/clappr"
    });
  </script>
</body>
```

##Information sources ・ 情報源

###Clappr homepage
https://github.com/clappr/clappr
http://clappr.io/

###Clappr plugins
https://github.com/clappr/clappr/blob/master/doc/EXTERNAL_PLUGINS.md
https://github.com/clappr/clappr/wiki/Our-first-plugin
https://github.com/clappr/dash-shaka-playback
https://github.com/clappr/clappr-stats
https://github.com/lucasrodcosta/clappr-nerd-stats
https://github.com/clappr/clappr-level-selector-plugin
https://github.com/kslimani/clappr-google-ima-html5-preroll
https://github.com/tjenkinson/clappr-thumbnails-plugin
https://github.com/tjenkinson/clappr-thumbnails-plugin/issues/12
https://github.com/thiagopnts/clappr-video360
https://github.com/kslimani/clappr-google-ima-html5-preroll
https://github.com/Lethea/clappr-marquee-overlay

###Clappr Wiki:
https://github.com/clappr/clappr/wiki


###Media files & 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/
https://pixabay.com/en/polar-bear-arctic-wildlife-snow-404314/
###MPEG-DASH demo files
http://dash-mse-test.appspot.com/media.html
http://rdmedia.bbc.co.uk/dash/ondemand/bbb/
###HLS demo files
https://github.com/notanewbie/LegalStream