網(wǎng)站怎么做導(dǎo)航條手機(jī)百度最新正版下載
Notes 視頻播放的幾種方式
一、Video
- mp4鏈接直接播放
二、?？低?.3插件版直播、云臺控制，資源下載地址
- index.html引入hk文件中的js文件
- 雙擊
HCWebSDKPlugin.exe安裝插件 - 前端參照文件夾hkCamera中的示例代碼
三、?？低?.2無插件版直播，資源下載地址
- 打開WEB無插件開發(fā)包_v3.2文件
- 進(jìn)入目錄
\WEB無插件開發(fā)包_v3.2\nginx-1.10.2\conf - 打開
nginx.conf - 可配服務(wù)IP及端口
listen 9000;server_name 127.0.0.1; - 進(jìn)入目錄
\WEB無插件開發(fā)包_v3.2\nginx-1.10.2，雙擊start.bat可開啟nginx服務(wù) - 瀏覽訪問
http://127.0.0.1:9000/cn/demo.html#/ - demo.html 頁面已根據(jù)實(shí)際情況做了修改，可嵌入iframe使用
- 配合前端使用
<iframe ref="iframe"class="iframe"src="http://127.0.0.1:9000/cn/demo.html#/"></iframe>const iframe = ref();function openVideoModal() {<!-- 與iframe通信，可做一定的延遲，因?yàn)橐撁嬉鸭虞d，iframe頁面才能監(jiān)聽到通信 -->if (iframe.value)iframe.value.contentWindow.postMessage({ type: 'play', cameraIp: '攝像機(jī)或錄像機(jī)IP，可看demo.js中的配置', }, '*');}function closeVideoModal() {if (iframe.value)iframe.value.contentWindow.postMessage({ type: 'stop', }, '*');}
四、webrtc，資源下載地址
- index.html引入，webrtc中的兩個(gè)js文件
- 前端
- 頁面
<template><div :class="{ webrtcVideo: true, videoLoad: !videoLoadSuccess }"><video class="webrtcVideo":id="'video_' + videoUrl"ref="videoRef"autoplayloopmuted:controls="controls"></video></div></template><script setup>import { onBeforeUnmount, onMounted, ref } from 'vue';import { Webrtc } from "./webrtc.js";defineExpose({ replay });const props = defineProps({<!-- rtsp://admin:wts12345@172.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----', "視頻元數(shù)據(jù)加載完畢", props.videoUrl);videoLoadSuccess.value = true;}, true);});onBeforeUnmount(() => {Webrtc.getInstance().disconnect(props.videoUrl);});</script><style lang='less' 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; //對應(yīng)元素idif (!rtspUrl) return;let webRtcServer = new WebRtcStreamer(id,`http://127.0.0.1:28000`);//對應(yīng)推流服務(wù)運(yùn)行命令中的ip:portconsole.log("webrtc rtsp地址：" + rtspUrl);webRtcServer.connect(rtspUrl,null,"rtptransport=tcp",null);this.urlMap.set(id, webRtcServer);}disconnect(url) {let id = "video_" + url; //對應(yīng)元素idlet webrtc = this.urlMap.get(id);if (webrtc) webrtc.disconnect();this.urlMap.delete(id);}} - 推流服務(wù)
- 文檔
https://github.com/mpromonet/webrtc-streamer - 打開webrtc-streamer文件夾
- 復(fù)制運(yùn)行命令.txt中的命令，IP和端口可根據(jù)實(shí)際情況修改
- 在webrtc-streamer-v0.8.4-dirty-Windows-AMD64-Release 文件目錄下，運(yùn)行上述命令
- 文檔
五、西瓜視頻播放器 xgplayer v3.X
- 文檔
https://h5player.bytedance.com/plugins/extension/xgplayer-flv.html#%E5%AE%89%E8%A3%85 - CDN安裝（也可npm安裝），index.html引入
<script src="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js" charset="utf-8"></script><script src="https://unpkg.byted-static.com/xgplayer-flv/3.0.10/dist/index.min.js" charset="utf-8"></script> - 實(shí)現(xiàn)
<!-- 播放容器 --><div id="player1"></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 - 實(shí)現(xiàn)
<!-- 播放容器 --><div id="player1"></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,//最大緩存時(shí)間liveBufferLatencyMinRemain: 0.2,//最小緩存時(shí)間});player.value.attachMediaElement(videoElement);player.value.load();// ------------------播放器的一些異常監(jiān)聽player.value.on(mpegts.Events.ERROR, (e) => {console.log('mpegts.Events.ERROR----發(fā)生異常', e);});player.value.on(mpegts.Events.LOADING_COMPLETE, (e) => {console.log('mpegts.Events.LOADING_COMPLETE----直播結(jié)束', 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 - 實(shí)現(xiàn)
<!-- 播放容器 --><div id="player1"></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}