Web Player

Play RTMP Stream

We recommend using videojs for playing RTMP stream via web browser.

Preparation

Please download latest release of videojs from github.

https://github.com/videojs/video.js

Please download latest release of videojs flash from github.

https://github.com/videojs/videojs-flash

Integration Sample Code

1. Include js and css

<link rel="stylesheet" href="static/css/video-js.min.css"/>

<script src="static/js/video.min.js"></script>
<script src="static/js/videojs-flash.min.js"></script>

2. Div for Player

<div class="tab-content bg-white border border-top-0 p-3">
    <div class="tab-pane fade in show active" id="rtmp" role="tabpanel"
         aria-labelledby="pills-rtmp-tab">
        <div class="input-group mb-3" style="width:100%;">
            <input type="text" class="form-control"
                   placeholder="Please input RTMP live stream URL here" id="url-rtmp">
            <div class="input-group-append">
                <button class="btn btn-danger" type="button" onclick="playRtmp()">Play</button>
            </div>
        </div>

        <div class=" text-center">
            <div class="web-player">
                <video id="player-rtmp" style="width:960px; height:480px;"
                       class="video-js vjs-big-play-centered"></video>
            </div>
        </div>
</div>

3. Start Playing in js

let rtmpPlayer;

function playRtmp() {
    let playUrl = $('#url-rtmp').val().trim();

    if (playUrl === '') {
        showErrorToast('Please input RTMP play url');
        throw new Error('url is null exception');
    }

    if (rtmpPlayer !== undefined) {
        rtmpPlayer.src({
            src: playUrl,
            type: 'rtmp/flv'
        });
        return;
    }

    rtmpPlayer = videojs('#player-rtmp', {
        autoplay: true
    });
    rtmpPlayer.src({
        src: playUrl,
        type: 'rtmp/flv'
    });

    rtmpPlayer.play();
}

Play HTTP-FLV Stream

We recommend using flvjs for playing HTTP-FLV stream via web browser.

Preparation

Please download latest release of flvjs from github.

https://github.com/Bilibili/flv.js/

Integration Sample Code

1. Include js and css

<script src="static/js/flv.js/1.5.0/flv.min.js"></script>

2. Div for Player

<div class="tab-pane fade in" id="http-flv" role="tabpanel"
                             aria-labelledby="pills-http-flv-tab">
    <div class="input-group mb-3" style="width: 960px;">
        <input type="text" class="form-control"
               placeholder="Please input http-flv live stream URL here" id="url-http-flv">
        <div class="input-group-append">
            <button class="btn btn-danger" type="button" id="play-btn-http-flv">Play</button>
        </div>
    </div>

    <div class="col-5 p-0">
        <div class="web-player">
            <video id="player-http-flv" style="width:960px; height:480px;"
                   class="video-js vjs-big-play-centered"></video>
        </div>
    </div>

    <div class="input-group mb-3" style="width: 960px; padding-top: 10px;">
        <textarea class="form-control" rows="1" id="play-flv-console" style="width: 960px;" readonly>Streaming information ...</textarea>
    </div>
</div>

3. Start Playing in js

function playflv() {
        if (! flvjs.isSupported()) {
            console.log("Browser does not support.");
        }

        let videoElement = document.getElementById('player-http-flv');
        let url = document.getElementById('url-http-flv');
        flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            cors: true,
            url: url
        }, {
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128     
        });

        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
}