深圳做网站的价格,什么软件制作网站快,深圳住房和建设局新网站,网站开发我嵌入式开发Notes 视频播放的几种方式
一、Video
mp4链接直接播放
二、海康威视3.3插件版直播、云台控制#xff0c;资源下载地址
index.html引入hk文件中的js文件双击HCWebSDKPlugin.exe安装插件前端参照文件夹hkCamera中的示例代码
三、海康威视3.2无插件版直播#xff0c;资源下…Notes 视频播放的几种方式
一、Video
mp4链接直接播放
二、海康威视3.3插件版直播、云台控制资源下载地址
index.html引入hk文件中的js文件双击HCWebSDKPlugin.exe安装插件前端参照文件夹hkCamera中的示例代码
三、海康威视3.2无插件版直播资源下载地址
打开WEB无插件开发包_v3.2文件进入目录\WEB无插件开发包_v3.2\nginx-1.10.2\conf打开 nginx.conf可配服务IP及端口 listen 9000;server_name 127.0.0.1;进入目录\WEB无插件开发包_v3.2\nginx-1.10.2双击start.bat可开启nginx服务浏览访问 http://127.0.0.1:9000/cn/demo.html#/demo.html 页面已根据实际情况做了修改可嵌入iframe使用配合前端使用 iframe refiframeclassiframesrchttp://127.0.0.1:9000/cn/demo.html#//iframeconst iframe ref();function openVideoModal() {!-- 与iframe通信可做一定的延迟因为要页面已加载iframe页面才能监听到通信 --if (iframe.value)iframe.value.contentWindow.postMessage({ type: play, cameraIp: 摄像机或录像机IP可看demo.js中的配置, }, *);}function closeVideoModal() {if (iframe.value)iframe.value.contentWindow.postMessage({ type: stop, }, *);}四、webrtc资源下载地址
index.html引入webrtc中的两个js文件前端 页面 templatediv :class{ webrtcVideo: true, videoLoad: !videoLoadSuccess }video classwebrtcVideo:idvideo_ videoUrlrefvideoRefautoplayloopmuted:controlscontrols/video/div/templatescript setupimport { onBeforeUnmount, onMounted, ref } from vue;import { Webrtc } from ./webrtc.js;defineExpose({ replay });const props defineProps({!-- rtsp://admin:wts12345172.16.100.165:554/Streaming/Channels/101 --videoUrl: {type: String,default: ,required: true,},controls: {type: Boolean,default: true,required: true,},});const videoRef ref();const videoLoadSuccess ref(false);function replay() {videoRef.value.load();}onMounted(() {Webrtc.getInstance().connect(props.videoUrl);videoRef.value.addEventListener(loadedmetadata, function () {console.log(props.videoUrl----, 视频元数据加载完毕, props.videoUrl);videoLoadSuccess.value true;}, true);});onBeforeUnmount(() {Webrtc.getInstance().disconnect(props.videoUrl);});/scriptstyle langless scoped.webrtcVideo {width: 100%;height: 100%;object-fit: fill;position: relative;// background-color: red;}.videoLoad:before {content: 视频加载中...;position: absolute;top: 40%;left: 50%;transform: translate(-50%, -40%);color: #ffffff;font-size: 14px;}/style连接 webrtc.js export class Webrtc {constructor() {this.urlMap new Map();}static instance;static getInstance() {if (!this.instance) {this.instance new Webrtc();}return this.instance;}connect(rtspUrl, key) {let id video_ rtspUrl; //对应元素idif (!rtspUrl) return;let webRtcServer new WebRtcStreamer(id,http://127.0.0.1:28000);//对应推流服务运行命令中的ip:portconsole.log(webrtc rtsp地址 rtspUrl);webRtcServer.connect(rtspUrl,null,rtptransporttcp,null);this.urlMap.set(id, webRtcServer);}disconnect(url) {let id video_ url; //对应元素idlet webrtc this.urlMap.get(id);if (webrtc) webrtc.disconnect();this.urlMap.delete(id);}} 推流服务 文档https://github.com/mpromonet/webrtc-streamer打开webrtc-streamer文件夹复制运行命令.txt中的命令IP和端口可根据实际情况修改在webrtc-streamer-v0.8.4-dirty-Windows-AMD64-Release 文件目录下运行上述命令
五、西瓜视频播放器 xgplayer v3.X
文档 https://h5player.bytedance.com/plugins/extension/xgplayer-flv.html#%E5%AE%89%E8%A3%85CDN安装也可npm安装index.html引入 script srchttps://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js charsetutf-8/scriptscript srchttps://unpkg.byted-static.com/xgplayer-flv/3.0.10/dist/index.min.js charsetutf-8/script实现 !-- 播放容器 --div idplayer1/div!-- 播放 --let player ref();function play(){player.value new window.Player({id: player1,isLive: true,playsinline: true,url: https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv,autoplay: true,fluid: true,//流式布局可使播放器宽度跟随父元素的宽度大小变化plugins: [window.FlvPlayer],});}!-- 销毁 --function destroy(){player.value.destroy()player.value null}
六、mpegts.js
文档 https://github.com/xqq/mpegts.js/blob/master/README_zh.md安装 npm install --save mpegts.js实现 !-- 播放容器 --div idplayer1/div!-- 播放 --import mpegts from mpegts.js;let player ref();function play(){if (mpegts.isSupported()) {let videoElement document.getElementById(player1);player.value mpegts.createPlayer({type: flv,isLive: true,url: https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv}, {liveBufferLatencyChasing: true,//开启追帧liveBufferLatencyMaxLatency: 0.9,//最大缓存时间liveBufferLatencyMinRemain: 0.2,//最小缓存时间});player.value.attachMediaElement(videoElement);player.value.load();// ------------------播放器的一些异常监听player.value.on(mpegts.Events.ERROR, (e) {console.log(mpegts.Events.ERROR----发生异常, e);});player.value.on(mpegts.Events.LOADING_COMPLETE, (e) {console.log(mpegts.Events.LOADING_COMPLETE----直播结束, e);});player.value.on(mpegts.Events.STATISTICS_INFO, (e) {console.log(mpegts.Events.STATISTICS_INFO----解码帧, e.decodedFrames);});}}!-- 销毁 --function destroy(){player.value.destroy()player.value null}
七、flv.js
文档 https://github.com/bilibili/flv.js安装 npm install --save flv.js实现 !-- 播放容器 --div idplayer1/div!-- 播放 --import flvjs from flvjs.js;let player ref();function play(){if (flvjs.isSupported()) {let videoElement document.getElementById(player1);player.value flvjs.createPlayer({type: flv,url: https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv});player.value.attachMediaElement(videoElement);player.value.load();player.value.play();}}!-- 销毁 --function destroy(){player.value.destroy()player.value null}
