? ? ? ?
目錄
1.APP播放.m3u8監控視頻
2.H5播放.m3u8監控視頻
3.微信小程序播放.m3u8監控視頻
? ? ? ?最近在寫一個uniapp實現h5、app、微信小程序兼容三端的播放監控視頻功能，我原本以為一套代碼多處運行，但事實并非如此，h5可以運行，微信小程序不一定可以運行，APP也是如此。上網查閱很多資料，最終3端效果實現成功。
1.APP播放.m3u8監控視頻
APP對原生支持比較好，可以直接使用uniapp官網的video組件，本人親自試過正常播放。
video地址：uni-app官網
代碼實現如下：
<!-- APP 端 --><video id="myVideo":src="videoUrl"controlsautoplayenable-play-gestureobject-fit="contain"class="video-player"@error="videoError"></video>代碼還是比較簡單的，將videoUrl替換成自己的.m3u8格式Url即可。
2.H5播放.m3u8監控視頻
? ? ? ?這里一開始我也以為直接使用上面的代碼就可以，但是uniapp運行起來發現根本播放不出來，雖然 HTML5 視頻播放器支持多種視頻格式，但并不是所有的瀏覽器都支持 .m3u8 格式的視頻流。確保您使用的瀏覽器支持 HLS。我上網查閱資料最終效果實現成功!
實現代碼：
<template>
<div id="app1"><div class="video-js" ref="videos"></div>
</div>
</template><script>
export default {data() {return {videoUrl: '',// H5 相關狀態player: null,visibilityChange: null,hidden: null,}}, mounted() {// 動態加載video.js CDN資源this.loadScript('https://vjs.zencdn.net/7.21.2/video.min.js', () => {this.loadStyle('https://vjs.zencdn.net/7.21.2/video-js.min.css');// 設置頁面可見性API的兼容性處理this.setupVisibilityAPI();// 等待資源加載完成setTimeout(() => {this.setupVideoPlayer();}, 300);});},beforeDestroy() {// 組件銷毀時移除事件監聽document.removeEventListener(this.visibilityChange, this.handleVisibilityChange);// 銷毀播放器if (this.player) {this.player.dispose();this.player = null;}},methods: {loadScript(src, callback) {const script = document.createElement('script');script.src = src;script.onload = callback;document.body.appendChild(script);},loadStyle(href) {const link = document.createElement('link');link.href = href;link.rel = 'stylesheet';document.head.appendChild(link);},setupVisibilityAPI() {// 設置頁面可見性API的兼容性處理if (typeof document.hidden !== "undefined") {this.hidden = "hidden";this.visibilityChange = "visibilitychange";} else if (typeof document.msHidden !== "undefined") {this.hidden = "msHidden";this.visibilityChange = "msvisibilitychange";} else if (typeof document.webkitHidden !== "undefined") {this.hidden = "webkitHidden";this.visibilityChange = "webkitvisibilitychange";}// 添加事件監聽document.addEventListener(this.visibilityChange, this.handleVisibilityChange.bind(this), false);},handleVisibilityChange() {if (!this.player) return;if (document[this.hidden]) {// 頁面不可見時暫停播放this.player.pause();} else {// 頁面重新可見時恢復播放this.player.play().catch(e => {console.log('自動播放失敗:', e);});}},setupVideoPlayer() {if (!window.videojs) {console.error('video.js未加載成功');return;}let video = document.createElement('video');video.id = 'video';video.className = 'video-js vjs-default-skin';video.preload = "auto";video.setAttribute('playsinline', true);video.setAttribute('webkit-playsinline', true);video.setAttribute('x5-video-player-type', 'h5');let source = document.createElement('source');source.src = this.videoUrl;video.appendChild(source);this.$refs.videos.appendChild(video);this.player = window.videojs('video', {autoDisable: true,preload: 'none',language: 'zh-CN',fluid: true,muted: false,aspectRatio: '16:9',controls: true,autoplay: false,loop: true,controlBar: {volumePanel: {inline: true},timeDivider: true,durationDisplay: true,progressControl: true,remainingTimeDisplay: true,fullscreenToggle: true,pictureInPictureToggle: false,}}, function() {this.on('error', function(err) {console.log("請求數據時遇到錯誤", err);});this.on('stalled', function(stalled) {console.log("網速失速", stalled);});});}}
}
</script>
<style>
#app1 {width: 100vw;height: 95vh;background: #000;display: flex;justify-content: center;align-items: center;}/* 視頻播放器主體 */.video-js {width: 90%;max-width: 1200px;height: auto;aspect-ratio: 16/9;border-radius: 8px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);margin-top: -200px;}/* 控制欄整體樣式 */.video-js .vjs-control-bar {background: rgba(20, 20, 20, 0.8);height: 3.5em;padding: 0 10px;}/* 按鈕樣式 */.video-js .vjs-control {width: 2.5em;height: 2.5em;margin: 0 2px;color: #fff;transition: all 0.3s;}.video-js .vjs-control:hover {color: #00a1d6;transform: scale(1.1);}/* 進度條樣式 */.video-js .vjs-progress-control {position: absolute;top: -1em;width: 100%;height: 0.5em;}.video-js .vjs-progress-holder {height: 100%;background: rgba(255, 255, 255, 0.2);}.video-js .vjs-play-progress {background: #00a1d6;}/* 音量控制 */.video-js .vjs-volume-panel {order: 4;}/* 時間顯示 */.video-js .vjs-time-control {min-width: 3em;padding: 0 5px;font-size: 1.1em;}/* 全屏按鈕 */.video-js .vjs-fullscreen-control {order: 5;}/* 加載動畫 */.video-js .vjs-loading-spinner {border-color: rgba(0, 161, 214, 0.7);}/* 大播放按鈕 */.video-js .vjs-big-play-button {width: 2.5em;height: 2.5em;line-height: 2.5em;border-radius: 50%;border: none;background: rgba(0, 161, 214, 0.8);top: 50%;left: 50%;transform: translate(-50%, -50%);transition: all 0.3s;}.video-js .vjs-big-play-button:hover {background: rgba(0, 161, 214, 1);transform: translate(-50%, -50%) scale(1.1);}/* 響應式調整 */@media (max-width: 768px) {.video-js {width: 100%;border-radius: 0;}.video-js .vjs-control-bar {height: 2.5em;}}</style>本人親自實踐，電腦瀏覽器，與手機瀏覽器訪問，都可以成功。
3.微信小程序播放.m3u8監控視頻
? ? ?在這里我是卡的最久的，因為直接使用video組件播放，在微信開發者工具中可以正常播放，但是在真機調試，小程序查看就是一直黑屏轉圈圈，有時候可以播放成功，但是幾秒中過后就是又是一直轉圈圈，最后就會報錯。有大佬會的可以在下方留言，最后采用web-view組件，實現播放，直接頁面跳轉。但是使用web-view跳轉監控視頻，又會有另一個問題，本地測試正常，但是上線，線上微信小程序就會出現提示不支持打開該頁面。一定得在微信開發者后臺校驗文件才可以打開，因為這是微信小程序的強制規則，這個校驗文件必須放在對應服務器才可以成功，假如我是調整螢石云的監控，那按照微信的說法，就要將校驗文件放入螢石云服務器的后臺，這樣顯然不現實，所以這里有兩種方案，第一使用代理，第二自己在寫一個頁面部署到自己的服務器，通過web-view跳轉到自己寫的頁面中，將監控視頻url一并傳入頁面，即可完成播放。
實現代碼：
<web-view :src="'https://你的域名/player.html?videoUrl='+encodeURIComponent(videoUrl)+
'&cameraTitle='+encodeURIComponent(cameraTitle)"></web-view>注意，這里跳轉必須是https，在這里viderUrl是視頻監控的鏈接，cameraTitle是標題，比如你播放的是那個監控，可加可不加，我這邊是加上了。
跳轉playeer.html頁面代碼實現：
其實下面的代碼保存，videoUrl替換即可播放,我只不過寫了兩套，你們可以選擇一套使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title id="pageTitle">監控播放器</title><style>body {margin: 0;padding: 270px 0px 0px 0px;font-family: Arial, sans-serif;background: #000;}}/* 容器樣式 */#app1 {background: #000;display: flex;justify-content: center;align-items: center;}/* 視頻播放器主體 */.video-js {width: 100%;max-width: 1200px;height: auto;aspect-ratio: 16/9;border-radius: 8px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);}</style>
</head>
<body><div id="app1"><div class="video-js" id="videos"></div></div><script>function getQueryParam(name) {const query = window.location.search.substring(1);const vars = query.split('&');for (let i = 0; i < vars.length; i++) {const pair = vars[i].split('=');if (decodeURIComponent(pair[0]) === name) {return decodeURIComponent(pair[1]);}}return null;
}// 從URL參數獲取視頻地址
const videoUrl = getQueryParam('videoUrl');// 從URL獲取攝像頭標題并設置頁面標題const cameraTitle = getQueryParam('cameraTitle');if (cameraTitle) {document.title = cameraTitle;document.getElementById('pageTitle').textContent = cameraTitle;}document.addEventListener('DOMContentLoaded', function() {const app = {player: null,visibilityChange: null,hidden: null,init: function() {// 動態加載video.js CDN資源this.loadScript('https://vjs.zencdn.net/7.21.2/video.min.js', () => {this.loadStyle('https://vjs.zencdn.net/7.21.2/video-js.min.css');// 設置頁面可見性API的兼容性處理this.setupVisibilityAPI();// 等待資源加載完成setTimeout(() => {this.setupVideoPlayer();}, 300);});},loadScript: function(src, callback) {const script = document.createElement('script');script.src = src;script.onload = callback;document.body.appendChild(script);},loadStyle: function(href) {const link = document.createElement('link');link.href = href;link.rel = 'stylesheet';document.head.appendChild(link);},setupVisibilityAPI: function() {// 設置頁面可見性API的兼容性處理if (typeof document.hidden !== "undefined") {this.hidden = "hidden";this.visibilityChange = "visibilitychange";} else if (typeof document.msHidden !== "undefined") {this.hidden = "msHidden";this.visibilityChange = "msvisibilitychange";} else if (typeof document.webkitHidden !== "undefined") {this.hidden = "webkitHidden";this.visibilityChange = "webkitvisibilitychange";}// 添加事件監聽document.addEventListener(this.visibilityChange, this.handleVisibilityChange.bind(this), false);},handleVisibilityChange: function() {if (!this.player) return;if (document[this.hidden]) {// 頁面不可見時暫停播放this.player.pause();} else {// 頁面重新可見時恢復播放this.player.play().catch(e => {console.log('自動播放失敗:', e);});}},setupVideoPlayer: function() {if (!window.videojs) {console.error('video.js未加載成功');return;}let video = document.createElement('video');video.id = 'video';video.className = 'video-js vjs-default-skin';video.preload = "auto";video.setAttribute('playsinline', true);video.setAttribute('webkit-playsinline', true);video.setAttribute('x5-video-player-type', 'h5');let source = document.createElement('source');source.src = videoUrl ;video.appendChild(source);document.getElementById('videos').appendChild(video);this.player = window.videojs('video', {autoDisable: true,preload: 'none',language: 'zh-CN',fluid: true,muted: false,aspectRatio: '16:9',controls: true,autoplay: false,loop: true,controlBar: {volumePanel: {inline: true},timeDivider: true,durationDisplay: true,progressControl: true,remainingTimeDisplay: true,fullscreenToggle: true,pictureInPictureToggle: false,}}, function() {this.on('error', function(err) {console.log("請求數據時遇到錯誤", err);});this.on('stalled', function(stalled) {console.log("網速失速", stalled);});});}};// 初始化應用app.init();});</script>
</body>
</html>
本人親自測試，3端都可以播放，有問題可以在下方評論留言。
教程 | Excel文檔自動批量AI文檔生成實戰，中級開篇)
)