Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@mehdiinアイレット株式会社

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

Last updated at Posted at 2018-06-29
Screen Shot 2018-05-24 at 18.18.10.png Screen Shot 2018-06-29 at 11.59.50.png

##はじめに

こんにちは 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 ・ 簡単な実装
Screen Shot 2018-06-29 at 11.41.29.png

<!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・字幕

Screen Shot 2018-06-29 at 11.27.35.png 
<!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・ポスター
Screen Shot 2018-06-29 at 11.54.03.png

<!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
Screen Shot 2018-06-27 at 10.43.11.png

<!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
Screen Shot 2018-06-28 at 9.52.35.png

Screen Shot 2018-06-27 at 10.40.25.png 
<!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

WebTorrent-image.png

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 !
Screen Shot 2018-06-28 at 10.01.27.pngScreen Shot 2018-06-28 at 10.03.48.pngScreen Shot 2018-06-28 at 10.04.57.pngScreen Shot 2018-06-28 at 10.06.03.pngScreen Shot 2018-06-28 at 10.07.23.png

Screen Shot 2018-06-29 at 11.10.11.png

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/

8
1
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?