OpenplayerJSの使用法

<img width="755" alt="Screen Shot 2019-02-19 at 10.30.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/908065cd-017c-160d-915e-21ca8860a636.png">



##はじめに

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

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

##Copyrights of videos
**Big Buck Bunny**
© copyright 2008, Blender Foundation | www.bigbuckbunny.org
**Sintel**
© copyright Blender Foundation | www.sintel.org
**Tears of Steel**
© copyright Blender Foundation | https://mango.blender.org/

##What is OpenPlayerJS ・OpenPlayerJSとは

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

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

#Simple example・ 簡単な実装

![simple_opj2.jpg](https://qiita-image-store.s3.amazonaws.com/0/229807/3dcfc646-0b80-e632-82ce-e7996df0789d.jpeg)



```html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.css">
   </head>
   <body>
      <video class="op-player op-player__media" id="video" controls playsinline>
         <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" type="video/mp4"></video>
      <script src="//cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.js"></script>
   </body>
</html>
```

###Demo・デモ
https://codepen.io/mr1985/pen/OJLeZJP

*Alternative way ・別の方法*

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.css">
</head>

<body>
  <script src="//cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.js"></script>

  <video class="op-player op-player__media" id="video" controls playsinline>
         <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" type="video/mp4">
  </video>

</body>
<script>
  var player = new OpenPlayer('video');
  player.init();
  player.getElement().addEventListener('play', function() {
    console.log('play');
  });
</script>

</html>
```

##Demo ・デモ
https://codepen.io/mr1985/pen/gOYNzbY


#HLS
![opjs2.jpeg](https://qiita-image-store.s3.amazonaws.com/0/229807/9fd186b2-724a-75ca-1e40-52c2d15d30bf.jpeg)

```html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.css">
   </head>
   <body>
      <script src="//cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.js"></script>
      <video class="op-player op-player__media" id="video" controls playsinline>
         <source src="//bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type="application/x-mpegURL">
      </video>
   </body>
   <script>
      var player = new OpenPlayer('video',
      false, // Fullscreen by default
       {
        //Other options
        hls: {
           // all HLS options available at https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning.
           debug:true
       },
      });
      player.init();
   </script>
</html>
```

##Demo ・デモ
https://codepen.io/mr1985/pen/qBWzYEJ

#MPEG Dash
![opjs3.jpg](https://qiita-image-store.s3.amazonaws.com/0/229807/e0a7800c-701a-1fdb-4e47-96dbc3b87c30.jpeg)

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.css">
</head>

<body>
  <script src="//cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.js"></script>
  <!-- TODO add dash js -->
  <video class="op-player op-player__media" id="video" controls playsinline>
         <source src="//amssamples.streaming.mediaservices.windows.net/683f7e47-bd83-4427-b0a3-26a6c4547782/BigBuckBunny.ism/manifest(format=mpd-time-csf)" type="application/dash+xml">
      </video>
</body>


</html>
 
<script>

    var player = new OpenPlayer('video',
    false, // Fullscreen by default
    {
      dash:{
        //Dash options here
      }
    }
  );
  player.init();
</script>

</html>
 
```
##Demo ・デモ
https://codepen.io/mr1985/pen/ExYBLjL

#Subtitles・字幕
![opjs5.jpg](https://qiita-image-store.s3.amazonaws.com/0/229807/51fb4a6d-7f49-1be5-9c24-5bee3734e334.jpeg)

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.css">
</head>

<body>
  <script src="//cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.js"></script>

  <video class="op-player op-player__media" id="video" controls playsinline crossorigin="anonymous" width="640" height="360" src="//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.webm">
      <track src="//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt" kind="subtitles" srclang="en" label="English">
      <track src="//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-es.vtt" kind="subtitles" srclang="es" label="Spanish">
      <track src="//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-de.vtt" kind="subtitles" srclang="de" label="German">
  </video>

</body>
<script>
  var player = new OpenPlayer('video');
  player.init();
  player.getElement().addEventListener('play', function() {
    console.log('play');
  });
</script>

</html> 
```
##Demo・デモ
https://codepen.io/mr1985/pen/NWKZMbb

# Google IMA ads 
<img width="894" alt="Screen Shot 2019-10-02 at 14.37.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229807/e2c9a4e9-bc7c-ee28-c65a-8dc2c7c5de10.png">

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.css">
</head>

<body>
  <script src="//cdn.jsdelivr.net/npm/openplayerjs@1.12.1/dist/openplayer.min.js"></script>

  <video class="op-player op-player__media" id="video" controls playsinline>
         <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" type="video/mp4">
  </video>

</body>

<script>
  var player = new OpenPlayer('video','https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpostoptimizedpod&cmsid=496&vid=short_onecue&correlator=');
  player.init();
  player.getElement().addEventListener('play', function() {
    console.log('play');
  });
<script/>
```

##Demo・デモ
https://codepen.io/mr1985/pen/qBWerby


#Information sources ・ 情報源
https://github.com/openplayerjs/openplayerjs
https://www.openplayerjs.com/
https://iandevlin.com/blog/2016/05/html5/help-with-webvtt/