share facebook facebook twitter menu hatena pocket slack

2019.10.21 MON

Videojs 7 + RTMP の使用法

はじめに

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

Objective・目的

Learning how to use videojs + RTMP through a simple example.
videojs + RTMPの簡単な例を学ぶこと。

A simple implementation ・ 簡単な実装

<!DOCTYPE html>
<html>

<head>
  <title>Videojs 7 + RTMP  (flash)</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video-js.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.2/videojs-flash.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/videojs-flashls-source-handler@1.1.2/dist/videojs-flashls-source-handler.min.js"></script>
</head>

<body>
  <video class="video-js vjs-default-skin" id="video-container" controls muted autoplay >
    <source src="rtmp://fms.105.net/live/rmc1" type="rtmp/mp4">
  </video>
</body>
<script>
  var options = {
    flash: {
      swf: '//cdnjs.cloudflare.com/ajax/libs/videojs-swf/5.4.2/video-js.swf'
    },
    fluid: true
  };
  var player = videojs('video-container', options);
</script>

</html>

Compatibility ・ウェブブラウザの互換性

Browser Compatibility
Safari 12 Desktop YES
Firefox 69 Desktop YES
Chrome 74 Desktop YES

Information sources ・ 情報源

https://www.wowza.com/community/questions/50896/live-247-rtmp-stream-demo-url.html
https://github.com/videojs/video.js

元記事はこちら

Videojs 7 + RTMP の使用法

ラサニ メディ

ラサニ メディ

散歩することが好きです。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。