阿里云首页 物联网视频服务

在Web端播放视频

开发Web端播放器后,根据已获取的直播播放地址,您可在Web端观看直播并控制Web端视频播放器。

背景信息

Web端播放器兼容性如下:

  • 支持的音频编码协议:AAC

  • 支持的视频编码协议:H264

  • 支持的浏览器:Chrome、Firefox、Edge、Safari和UC浏览器

  • Web端直播播放器支持的播放协议:HTTP-FLV和HLS

前提条件

已完成获取直播播放地址

操作步骤

  1. 创建HTML文件,例如web.html。

  2. 将以下示例代码复制到web.html文件中。

    <!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() {
            //请求播放地址,xx.xx.xx.xx为您的服务器地址,scheme为播放协议类型,iotId为设备ID,instanceId为实例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>
  3. 参考下表,修改步骤2中代码return fetch('http://xx.xx.xx.xx:8082/live/stream?iotId=${Your_iotId}&scheme=${Your_scheme}&instanceId=${Your_instanceId}')中的参数。

    参数

    描述

    xx.xx.xx.xx

    您的服务器IP地址。

    ${Your_iotId}

    用于直播的IPC设备的设备ID,即物联网平台为该设备颁发的ID,设备的唯一标识符。可调用物联网平台QueryDeviceDetail查询。

    ${Your_scheme}

    直播播放协议:

    • flv:FLV播放协议。

    • hls:HLS播放协议。

    ${Your_instanceId}

    实例ID。

    您可在物联网平台控制台的实例概览页面,查看您的实例ID。

    注意

    如果公共实例没有ID,请参见如何获取实例ID

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

  4. 将web.html静态页面托管到Web服务器,查看播放效果。

    说明

    请您根据实际情况托管HTML页面,本地Web服务器可选用Apache或Nginx等服务器。

  5. 在浏览器中观看直播视频。同时,可单击页面上的功能按钮,控制播放器。播放效果

接口说明

代码中相关参数和接口说明,请参考接口说明

首页 物联网视频服务 入门教程 在Web端播放视频