在Web端播放视频

迈不过友情╰ 2023-10-13 12:00 7阅读 0赞

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

### 背景信息 ###

Web端播放器兼容性如下：

*  支持的音频编码协议：AAC
 *  支持的视频编码协议：H.264
 *  支持的浏览器：Chrome、Firefox、Edge、Safari和UC浏览器
 *  Web端直播播放器支持的播放协议：HTTP-FLV和HLS

### 前提条件 ###

已完成[获取直播播放地址][Link 1]。

### 操作步骤 ###

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>
    
    参考下表，修改步骤2中代码`return fetch('http://xx.xx.xx.xx:8082/live/stream?iotId=${Your_iotId}&scheme=${Your_scheme}&instanceId=${Your_instanceId}')`中的参数。![8961fc05777a4dee8b0dce1c9f1be6b8.png][]
3.  例如：`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.  在浏览器中观看直播视频。同时，可单击页面上的功能按钮，控制播放器。
    
    ### 接口说明 ###
    
    代码中相关参数和接口说明，请参考[接口说明][Link 2]。

[Link 1]: https://www.alibabacloud.com/help/zh/linkvisual/latest/obtain-a-live-streaming-url#topic-2064643
[8961fc05777a4dee8b0dce1c9f1be6b8.png]: https://img-blog.csdnimg.cn/8961fc05777a4dee8b0dce1c9f1be6b8.png
[Link 2]: https://www.alibabacloud.com/help/zh/linkvisual/latest/configurations#topic-2074831