Play videos on your web client - - Alibaba Cloud Documentation Center

After you develop a web player, you can watch live videos on your web client by using the obtained URL. You can also control the web player.

Background information

The following items describe the compatibility of the web player:

Supported audio encoding protocol: AAC
Supported video encoding protocol: H.264
Supported browsers: Chrome, Firefox, Edge, Safari, and UC
Supported streaming protocols: HTTP-FLV and HLS

Prerequisites

The live streaming URL is obtained. For more information, see Obtain a live streaming URL.

Procedure

Create an HTML file, such as web.html.

Copy the following sample code to the web.html file:

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>videojs-contrib-hls embed</title>
    <link href="//g.alicdn.com/code/lib/video.js/7.9.7/video-js.min.css" rel="stylesheet">
    <script src="//g.alicdn.com/code/lib/video.js/7.9.7/video.min.js"></script>
    <script src="//g.alicdn.com/linkplatform/videojs-plugins/0.0.3??videojs-tech-flv.js,videojs-plugin-hls-compat.js"></script>
</head>


<body>
<div class="container">
    <div id="videoEl" class="video-js vjs-default-skin vjs-fluid"></div>
</div>
</body>

<script>
    if (!videojs.getTech('flv')) {
        videojs.registerTech('flv', videojsTechFlv);
    }
    if (!videojs.getPlugin('hlsCompat')) {
        videojs.registerPlugin('hlsCompat', videojsPluginHlsCompat);
    }

    function getStreamUrl() {
        // Request the live streaming URL. Replace xx.xx.xx.xx with the endpoint of your server. The scheme parameter specifies the streaming protocol. The iotId parameter specifies the device ID. The instanceId parameter specifies the instance ID.
        return fetch('http://xx.xx.xx.xx:8082/live/stream?iotId=${Your_iotId}&scheme=${Your_scheme}&instanceId=${Your_instanceId}')

            .then(response => response.text())
            .then(data => {
                console.log(data);
                return data;
            });
    }

    function getSourceType(url) {
        let type = '';
        if (/\.flv/.test(url)) {
            type = 'video/x-flv';
        } else if (/\.m3u8/.test(url)) {
            type = 'application/x-mpegURL';
        } else if(/\.mp4/.test(url)) {
            type = 'video/mp4';
        }
        return type;
    }

    function createPlayer(cb) {
        var videoEl = document.getElementById('videoEl');
        var player = videojs(videoEl, {
            autoplay: false,
            muted: true,
            controls: true,
            preload: 'none',
            loop: false,
            techOrder: ['flv', 'html5'],
            flv: {
                reconnInterval: 5000,
                reconnTimes: 10,
                getStreamUrl,
                mediaDataSource: {
                    cors: true,
                    withCredentials: true
                },
                flvConfig: {
                    lazyLoadMaxDuration: 24 * 60 * 60,
                },
            },
            html5: {
                hls: {
                    cacheEncryptionKeys: true,
                },
            },
        }, cb);

        player.on('error', (e) => {
            console.error('videojs error: ', e);
        });
        player.on('flvError', (e) => {
            console.error('flv error: ', e.errorInfo);
        });

        var wrappedPlayer = {
            play: function(loadSource) {
                if (loadSource) {
                    if (!player.paused()) {
                        player.pause();
                    }
                    player.reset();
                    player.removeClass('vjs-paused');
                    player.addClass('vjs-waiting');
                    return getStreamUrl().then((url) => {
                        var source = {
                            src: url,
                            type: getSourceType(url)
                        };
                        player.src(source);
                        player.autoplay(true);
                        player.load();
                    });
                }

                return player.play();
            },

            pause: function() {
                return player.pause();
            }
        }

        return wrappedPlayer;
    }

    if (!videojs.getTech('flv')) {
        videojs.registerTech('flv', videojsTechFlv);
    }
    if (!videojs.getPlugin('hlsCompat')) {
        videojs.registerPlugin('hlsCompat', videojsPluginHlsCompat);
    }

    const player = createPlayer(function () {
        player.play(true);
    });
</script>

The following table describes how to specify the parameters in return fetch('http://xx.xx.xx.xx:8082/live/stream?iotId=${Your_iotId}&scheme=${Your_scheme}&instanceId=${Your_instanceId}').

Parameter	Description
`xx.xx.xx.xx`	The IP address of your server.
`${Your_iotId}`	The ID of the IP camera. This ID is the unique identifier that is issued by IoT Platform to the device. You can call the QueryDeviceDetail operation of IoT Platform to query the device ID.
`${Your_scheme}`	The streaming protocol. Valid values: flv: the FLV protocol. hls: the HLS protocol.
`${Your_instanceId}`	The ID of the instance. The ID of the instance. You can view the instance ID on the Overview page in the IoT Platform console. Notice If your instance has an ID, you must configure this parameter. If you do not set this parameter, the call fails. If your instance has no Overview page or ID, you do not need to set this parameter. For more information, see Overview.

Example: return fetch('http://XX.XX.XX.XX:8082/live/stream?iotId=Oa5QiM****000000&scheme=flv&instanceId=iot-cn-n****ax03').

Use the web server to host the web.html static website and check the streaming performance.
Note
You can host the HTML website based on your business requirements. If you use an on-premises web server, you can use Apache or Nginx.
Watch live videos in your browser. You can control the player by clicking the buttons.

API operations

For more information about the API operations and parameters in the code, see API operations.