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

OpenplayerJSの使用法

More than 1 year has passed since last update.

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/

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