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

Fluid player: JavaScript open sources media playerの使用法

More than 1 year has passed since last update.

Screen Shot 2018-08-02 at 17.05.01.png

Screen Shot 2018-08-02 at 17.05.59.png

はじめに

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

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

Copyrights of videos

Big Buck Bunny
© copyright 2008, Blender Foundation | www.bigbuckbunny.org
Sintel
© copyright Blender Foundation | www.sintel.org

What is Fluid player ・ Fluid player とは

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

Objective・目的

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

A simple implementation ・ 簡単な実装

Screen Shot 2018-08-02 at 17.50.20.png

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fluid player</title>
  <!-- Fluid player style -->
  <link rel="stylesheet" href="//cdn.fluidplayer.com/v2/current/fluidplayer.min.css" />
</head>

<body>
  <!-- Fluid player -->
  <script src="//cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>

  <video src="Big_Buck_Bunny_Trailer_360p.webm" id="my-video" type="video/webm" width="640" height="360">
</body>
<script type="text/javascript">
  fluidPlayer("my-video");
</script>

</html>

Display some HTML on pause ・動画を一時停止するときにHTMLを表示する

You can generate code with the online builder.
コードジェネレータを使用してコードを生成できます。
https://docs.fluidplayer.com/builder/

Screen Shot 2018-08-03 at 10.15.30.png

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Fluid player</title>
    <!-- Fluid player style -->
    <link rel="stylesheet" href="//cdn.fluidplayer.com/v2/current/fluidplayer.min.css" />

    <!-- OnPause message style -->
    <style>
        .onpause {
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
            background-color: #FFF
        }
    </style>

</head>

<body>
    <!-- Fluid player -->
    <script src="//cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>

    <video src="Big_Buck_Bunny_Trailer_360p.webm" id="my-video" type="video/webm" width="640" height="360">
</body>
<script type="text/javascript">
var myFP = fluidPlayer(
        'my-video',
        {
            layoutControls: {
                htmlOnPauseBlock: {
                    html: '<p class="onpause">Thanks for reading my article ! I hope you like Fluid player ! </p>',
                    height: 100,
                    width: 200
                },
                allowDownload: false,
                allowTheatre: true,
                playbackRateEnabled: false,

                },
    }
);
</script>

</html>


Movie poster・ポスター

Screen Shot 2018-08-02 at 18.41.26.png

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fluid player</title>
  <!-- Fluid player style -->
  <link rel="stylesheet" href="//cdn.fluidplayer.com/v2/current/fluidplayer.min.css" />
</head>

<body>
  <!-- Fluid player -->
  <script src="//cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>

  <video src="sintel.mp4" id="my-video" type="video/mp4" width="640" height="360">
</body>
<script type="text/javascript">
  fluidPlayer("my-video",
  {
        layoutControls: {
            posterImage: 'sintel_poster.jpeg'
        }
    }
);
</script>

</html>

Seekbar preview ・ シークバープレビュー

In this example, I am using the following video:
この例では、次のビデオを使用しています。
sintel_trailer-480p.mp4

Screen Shot 2018-08-03 at 10.44.05.png

Generating files with a python script・Pythonスクリプトでファイルを生成する

To generate those files, you can use the following python 2 script:
ファイルを生成するには、次の Python 2 スクリプトを使用します。
https://github.com/vlanard/videoscripts/blob/master/sprites/makesprites.py

I edited the script with the following options:
以下のオプションを使用します。

USE_SIPS = False #True to use sips if using MacOSX (creates slightly smaller sprites), else set to False to use ImageMagick
THUMB_RATE_SECONDS=1 # every Nth second take a snapshot
THUMB_WIDTH=100 #100-150 is width recommended by JWPlayer; I like smaller files
SKIP_FIRST=True #True to skip a thumbnail of second 1; often not a useful image, plus JWPlayer doesn't seem to show it anyway, and user knows beginning without needing preview
SPRITE_NAME = "sintel.jpg" #jpg is much smaller than png, so using jpg
VTTFILE_NAME = "thumbs.vtt"
THUMB_OUTDIR = "thumbs"
USE_UNIQUE_OUTDIR = False #true to make a unique timestamped output dir each time, else False to overwrite/replace existing outdir
TIMESYNC_ADJUST = -.5 #set to 1 to not adjust time (gets multiplied by thumbRate); On my machine,ffmpeg snapshots show earlier images than expected timestamp by about 1/2 the thumbRate (for one vid, 10s thumbrate->images were 6s earlier than expected;45->22s early,90->44 sec early)
logger = logging.getLogger(sys.argv[0])
logSetup=False

Then run the following command ・次のコマンドを実行します。
python2 makesprites.py sintel_trailer-480p.mp4

Two files will be generated, the Text Track file & the montage file.
sintel_trailer-480p_thumbs.vtt
sintel_trailer-480p_thumbs.jpg

Montage file example・モンタージュファイルの例

sintel_trailer-480p_sintel.jpg

WebVTT example ・WebVTTの例

https://pastebin.com/raw/tqK2ejHW

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fluid Player</title>
  <!-- Fluid player style -->
  <link rel="stylesheet" href="//cdn.fluidplayer.com/v2/current/fluidplayer.min.css" />
</head>

<body>
  <!-- Fluid player -->
  <script src="//cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>

  <video src="sintel_trailer-480p.mp4" id="my-video" type="video/mp4" width="640" height="360">
</body>
<script type="text/javascript">
  fluidPlayer("my-video",
  {
      layoutControls: {
        timelinePreview: {
          file: 'sintel_trailer-480p_thumbs.vtt',
          type: 'VTT'
        }
      }
  });
</script>

</html>


HLS ・HLSの例

Screen Shot 2018-08-02 at 18.33.40.png

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fluid player</title>
  <!-- Fluid player style -->
  <link rel="stylesheet" href="//cdn.fluidplayer.com/v2/current/fluidplayer.min.css" />
</head>

<body>
  <!-- Fluid player -->
  <script src="//cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>

  <video id="my-video" width="640" height="360">
    <source src="//bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type="application/x-mpegURL">
  </video>
</body>
<script type="text/javascript">
  fluidPlayer("my-video");
</script>

</html>

MPEG-DASH ・MPEG-DASHの例

Screen Shot 2018-06-28 at 9.52.35.png

Screen Shot 2018-08-02 at 18.45.16.png

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fluid player</title>
  <!-- Fluid player style -->
  <link rel="stylesheet" href="//cdn.fluidplayer.com/v2/current/fluidplayer.min.css" />
</head>

<body>
  <!-- Fluid player -->
  <script src="//cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>

  <video id="my-video" width="640" height="360">
    <source src="//rdmedia.bbc.co.uk/dash/ondemand/bbb/2/client_manifest-common_init.mpd" type="application/dash+xml">
  </video>
</body>
<script type="text/javascript">
  fluidPlayer("my-video");
</script>

</html>


WebTorrent (Peer to peer with Bittorent)

WebTorrent-image.png

Screen Shot 2018-08-02 at 18.49.02.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を初期化するには数秒かかります。

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fluid player</title>

  <!-- WebTorrent -->
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>

  <!-- Fluid player style -->
  <link rel="stylesheet" href="//cdn.fluidplayer.com/v2/current/fluidplayer.min.css" />
</head>

<body>
  <!-- Fluid player -->
  <script src="//cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>

  <video src="Big_Buck_Bunny_Trailer_360p.webm" id="my-video" type="video/webm" width="640" height="360">
</body>
<script type="text/javascript">

var client = new WebTorrent();
var torrentId =
 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent';


  fluidPlayer("my-video");

  client.add(torrentId, function(torrent) {
  var file = torrent.files.find(function(file) {
    return file.name.endsWith('.mp4')
  });
  file.renderTo('video', {
    autoplay: false,
    muted: true
  }, function callback() {
    console.log("ready to play!");
  });
});
</script>

</html>

Google IMA

If you don't have IMA credentials, you can use demo tags.
IMA資格情報がない場合は、デモタグを使用できます。
https://developers.google.com/interactive-media-ads/docs/sdks/html5/tags

Screen Shot 2018-08-03 at 12.49.38.png

Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fluid player</title>
  <!-- Fluid player style -->
  <link rel="stylesheet" href="//cdn.fluidplayer.com/v2/current/fluidplayer.min.css" />
</head>

<body>
  <!-- Fluid player -->
  <script src="//cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>

  <video id="my-video" type="video/mp4" width="640" height="360" crossorigin="anonymous">
     <source src="sintel_trailer-480p.mp4" type="video/mp4">
  </video>
</body>
<script type="text/javascript">
  fluidPlayer("my-video", {
    vastOptions: {
      vastAdvanced: {
        vastLoadedCallback: (function() {
          console.log("Ad loaded")
        }),
        noVastVideoCallback: (function() {
          console.log("No ad")
        }),
        vastVideoSkippedCallback: (function() {
          console.log("Ad skipped")
        }),
        vastVideoEndedCallback: (function() {
          console.log("Ad ended");
        })
      },
      adList: [{
        roll: 'preRoll',
        vastTag: 'Your_Vast_Tag_URL_here',
        vAlign: 'top',
        nonlinearDuration: 10,
        size: '300x250'
      }]
    }
  });
</script>

</html>

https://docs.fluidplayer.com/ad_configuration/

Information sources ・ 情報源

Fluid player homepage

https://www.fluidplayer.com/
https://github.com/fluid-player/fluid-player

Fluid playerdocumentation

https://docs.fluidplayer.com/

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/

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
Comments
No 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
ユーザーは見つかりませんでした