はじめに

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

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

Copyrights of videos

Big Buck Bunny
© copyright 2008, Blender Foundation | www.bigbuckbunny.org
Sintel
© copyright Blender Foundation | www.sintel.org
Elephants Dream
© copyright Blender Foundation | https://orange.blender.org
Caminandes: Gran Dillama
© copyright Blender Foundation | http://caminandes.org

What is MediaElement.js ・ MediaElement.jsとは

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

Objective・目的

Learning how to use MediaElement.js through simple examples.
MediaElement.jsの簡単な例を学ぶこと。

A simple implementation ・ 簡単な実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- MediaElement style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <!-- MediaElement -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>

  <video id="player" width="640" height="360">
</body>
<script type="text/javascript">

      var player = new MediaElementPlayer('player', {
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });
        player.setSrc("//www.example.com/waterfall-video.mp4");
</script>

</html>

Alternative way ・別の方法

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- MediaElements style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <!-- MediaElement -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>

  <video id="player" width="640" height="360" src="//www.example.com/waterfall-video.mp4" type="video/mp4">
</body>
<script type="text/javascript">

      var player = new MediaElementPlayer('player', {
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });
</script>

</html>

Subtitles・字幕

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- MediaElement style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <!-- MediaElement -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>

  <video crossorigin="anonymous" id="player" 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 type="text/javascript">
  var player = new MediaElementPlayer('player', {
    success: function(mediaElement, originalNode) {
      console.log("Player initialised");
    }
  });
</script>

</html>

Responsive web design ・レスポンシブウェブデザイン

ezgif-1-33c5b79963.gif

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- MediaElement style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <!-- MediaElement -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>

  <video id="player">
</body>
<script type="text/javascript">

      var player = new MediaElementPlayer('player', {
        stretching: 'responsive',
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });
        player.setSrc("//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.webm");
</script>

</html>

Movie poster・ポスター

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- MediaElement style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <!-- MediaElement -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>

  <video id="player" width="640" height="360">
</body>
<script type="text/javascript">

      var player = new MediaElementPlayer('player', {
        poster: '//i.imgur.com/7wElKwu.jpg',
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });
        player.setSrc("//old.framatube.org/blip/060512_Art_Fondation-Blender_Elephant-Dream.webm");
</script>

</html>

HLS

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- MediaElement style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <!-- MediaElement -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>

  <video id="player" width="640" height="360">
</body>
<script type="text/javascript">

      var player = new MediaElementPlayer('player', {
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });
        player.setSrc("//www.streambox.fr/playlists/test_001/stream.m3u8");
</script>

</html>

MPEG-DASH

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- MediaElement style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <!-- MediaElements -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>

  <video id="player" width="640" height="360">
</body>
<script type="text/javascript">

      var player = new MediaElementPlayer('player', {
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });
        player.setSrc("//rdmedia.bbc.co.uk/dash/ondemand/bbb/2/client_manifest-common_init.mpd");
</script>

</html>

WebTorrent

BitTorrent (BT) is a communication protocol for peer-to-peer file sharing (“P2P”) which is used to distribute data and electronic files over the Internet.
© Wikipedia

BitTorrent（ビットトレント）は、Peer to Peerを用いたファイル転送用プロトコル及びその通信を行うソフトウェアです。
© Wikipedia

If you are interested in WebTorrent, I wrote a more detailed article.
WebTorrent に興味がある場合は、より詳細な記事にあります。

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

N.B It takes a few seconds to initialize WebTorrent.
注意 WebTorrentを初期化するには数秒かかります。

Before using WebTorrent with MediaElements.js, you need to initialize the player with a valid video file.
MediaElements.jsプレーヤーを初期化するには、有効なビデオファイルが必要です。

If you don’t have a test file, you can generate one with FFMPEG.
ビデオファイルがない場合は、FFMPEGで、作ることができます。

ffmpeg -f lavfi -i color=red -frames:v 200 dummyfile.mp4

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- WebTorrent -->
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <!-- MediaElements -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <video id="player" width="640" height="360" src="dummyfile.mp4" type="video/mp4">
</body>
<script type="text/javascript">
  var client = new WebTorrent();
  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';

    client.add(torrentId, function(torrent) {
      var player = new MediaElementPlayer('player', {
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });

      var file = torrent.files.find(function (file) {
          return file.name.endsWith('.mp4')
        })
      file.renderTo('video', {autoplay:false,muted:false,}, function callback() {
        console.log("WebTorrent is rendering");
      });
    });
</script>

</html>

Youtube, Vimeo, Dailymotion, Facebook & Twitch !

It’s very easy to play contents from famous video sharing platforms in MediaElement.js.
MediaElement.jsで有名なビデオ共有プラットフォームのコンテンツを再生するのはとても簡単です。

Video element・動画埋め込み要素

Vimeo

<video id="player" width="640" height="360" controls preload="none">
      <source src="//player.vimeo.com/video/277572065" type="video/vimeo">
</video>

Twitch

<video id="player" width="640" height="360" controls preload="none">
      <source src="URL" type="video/twitch">
</video>

YouTube

<video id="player" width="640" height="360" controls preload="none">
    <source src="//www.youtube.com/watch?v=aqz-KE-bpKQ" type="video/youtube">
</video>

Dailymotion

<video id="player" width="640" height="360" controls preload="none">
  <source src="//www.dailymotion.com/video/x5z1le9" type="video/dailymotion">
</video>

Facebook

<video id="player" width="640" height="360" controls preload="none">
    <source src="//www.facebook.com/facebook/videos/1088618757936341" type="video/facebook">
</video>

Facebook example・ Facebookの例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MediaElement</title>
  <!-- MediaElement style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.css" />
</head>

<body>
  <!-- MediaElement -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.js"></script>

  <!-- Renderers -->
  <script src="//cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/dailymotion.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/facebook.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/soundcloud.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/twitch.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/renderers/vimeo.min.js"></script>

  <video id="player" width="640" height="360" controls preload="none">
    <source src="//www.facebook.com/facebook/videos/1088618757936341" type="video/facebook">
</video>

</body>
<script type="text/javascript">
  var player = new MediaElementPlayer('player', {
    enablePluginDebug: true,
    success: function(mediaElement, originalNode) {
      console.log("Player initialised");
    }
  });
  player.load();
</script>

</html>

Information sources ・ 情報源

Mediaelement.js homepage

https://www.mediaelementjs.com/
https://github.com/mediaelement/mediaelement

Mediaelements.js documentation

https://github.com/mediaelement/mediaelement/tree/master/docs

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/
http://rdmedia.bbc.co.uk/dash/ondemand/bbb/
https://old.framatube.org/

元記事はこちら

「MediaElement.js: JavaScript open sources media playerの使用法」