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

OpenplayerJSの使用法

Screen Shot 2019-02-19 at 10.30.58.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

<!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 ・別の方法

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

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

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

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

Screen Shot 2019-10-02 at 14.37.36.png

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

Why do not you register as a user and use Qiita more conveniently?
  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
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