在Web端播放视频

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

背景信息

Web端播放器兼容性如下：

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

前提条件

已完成获取直播播放地址。

操作步骤

创建HTML文件，例如web.html。

将以下示例代码复制到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}')中的参数。

参数	描述
`xx.xx.xx.xx`	您的服务器IP地址。
`${Your_iotId}`	用于直播的摄像头的设备ID，即物联网平台为该设备颁发的ID，设备的唯一标识符。可调用物联网平台QueryDeviceDetail查询。
`${Your_scheme}`	直播播放协议。 flv：FLV播放协议。 hls：HLS播放协议。
`${Your_instanceId}`	实例ID。企业版实例：必须传入此参数。您可在物联网平台控制台的实例概览页面，查看您的企业版实例ID。公共实例：无需传入此参数。

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

将web.html静态页面托管到Web服务器，查看播放效果。
说明
请您根据实际情况托管HTML页面，本地Web服务器可选用Apache或Nginx等服务器。
在浏览器中观看直播视频。同时，可单击页面上的功能按钮，控制播放器。

接口说明

代码中相关参数和接口说明如下：

Video.js框架的参数说明如下表：

说明

Video.js框架是用于在网页上嵌入视频播放器的开源JS库。获取Video.js提供的其他配置播放器方法，请参考Video.js。

方法	是否可选	描述
autoplay	可选	播放器初始化之后，是否自动播放： true：自动播放。 false（默认）：手动播放。
muted	可选	是否静音： true：静音。 false（默认）：不静音。注意如果视频加载后就要立马播放，需要设置为true，防止被浏览器阻止播放视频。
controls	可选	是否配置控制条： true（默认）：配置。 false：不配置。若设置为false，则只能通过调用接口控制视频播放。
preload	可选	是否预加载视频。可配置为如下值： auto：自动预加载。 metadata：加载元数据信息，例如视频的长度，播放画面的尺寸等。 none：不预加载，开始播放时才开始下载视频。
loop	可选	是否循环播放： true：循环播放。 false（默认）：不循环播放。
techOrder	必选	Video.js的默认播放顺序。本示例中，配置为`['flv',` `'html5']`。
HLS相关配置
cacheEncryptionKeys	必选	是否缓存密钥： true：缓存 false：不缓存若设置为false，则每次获取ts文件前再获取一次密钥。

LinkVisual提供的接口：

播放视频

play() => Promise<undefined> | undefined

暂停播放视频
```
pause() => Player
```

设置播放源
如果不传入参数，则使用获取播放源功能。
```
src(source?: { src: string, type: string }) => string | undefined
```

重置播放器
调用后，会同时触发Video.js中的reset方法。
```
reset() => void
```

加载src中的资源
```
load() => void
```

设置从指定时间开始播放视频
如果不传入该参数，则返回当前的播放时间。
```
currentTime(seconds?: number) => number
```

自动播放
需要与Video.js中autoplay参数保持一致，如果不传参数，则获取Video.js中autoplay的值。
```
autoplay(value: boolean | string) => void
```

是否为暂停状态
```
paused() => boolean
```

开启监听事件
```
on(type: string, fn: Function) => Player
```
监听事件包括如下内容：
- canplay：加载的视频流达到了播放要求。
- ended：视频播放结束后触发。
- error：监听播放异常时触发。
- flvError：监听播放FLV视频流触发的异常。
- loadeddata：浏览器加载到了视频帧时触发。
- play：播放视频时触发。
- playing：视频正在播放时触发，由于网络或者其它情况导致视频播放卡顿，该事件会被反复触发。

移除监听事件

off(type: string, fn: Function) => Player

FLV相关配置

方法	是否可选	描述
reconnInterval	必选	直播重连间隔时长，单位为毫秒。例如设置为5000。
reconnTimes	必选	播放失败时，请求重连的次数。例如设置为10。
getStreamUrl: async()	必选	返回一个播放地址或者一个Promise最终返回播放地址。
cors	可选	是否支持跨域访问： true（默认）：支持。 false：不支持。
withCredentials	可选	是否在跨域请求时携带Cookie： true：携带。 false（默认）：不携带。

FLV播放相关配置
方法
是否可选
描述
lazyLoadMaxDuration
可选
加载指定时间的视频流后停止拉流，默认为3*60s。

﻿背景信息

前提条件

操作步骤

接口说明

背景信息