开发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}
用于直播的IPC设备的设备ID,即物联网平台为该设备颁发的ID,设备的唯一标识符。可调用物联网平台QueryDeviceDetail查询。
${Your_scheme}
直播播放协议:
flv:FLV播放协议。
hls:HLS播放协议。
${Your_instanceId}
实例ID。您可在物联网平台控制台的实例概览页面,查看当前实例的ID。
注意若有ID值,必须传入该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等服务器。
在浏览器中观看直播视频。同时,可单击页面上的功能按钮,控制播放器。
接口说明
代码中相关参数和接口说明,请参考接口说明。