From 705d30f85e616999b4cc3a294794dbad57cd8b35 Mon Sep 17 00:00:00 2001 From: bai <1643359946@qq.com> Date: Mon, 15 May 2023 14:08:47 +0800 Subject: [PATCH] =?UTF-8?q?2023=E5=B9=B45=E6=9C=8815=E6=97=A5=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=90=8E=E5=8F=B0=E7=9B=B4=E6=92=AD=E9=97=B4=EF=BC=8C?= =?UTF-8?q?=E6=9B=B4=E6=94=B9=E4=B8=BA=E6=96=B0=E7=89=88=EF=BC=8C=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=8E=A8=E6=B5=81=E5=BC=80=E5=85=B3=EF=BC=8C=E8=AF=BE?= =?UTF-8?q?=E9=A2=98=E5=BC=80=E5=85=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/kc/jiaoshi/index.vue | 318 ++++++++++++------ src/views/kc/jiaoshi/index.vue.左树右直播.bak | 169 ++++++++++ src/views/kc/jiaoshi/showAllLive.vue | 226 +++++++++++++ src/views/site/common/video/videojs/util.ts | 17 + src/views/site/common/video/videojs/video.vue | 72 +++- .../site/common/video/videojs/viewPage.vue | 11 +- src/views/site/utils/index.ts | 45 +++ 7 files changed, 744 insertions(+), 114 deletions(-) create mode 100644 src/views/kc/jiaoshi/index.vue.左树右直播.bak create mode 100644 src/views/kc/jiaoshi/showAllLive.vue diff --git a/src/views/kc/jiaoshi/index.vue b/src/views/kc/jiaoshi/index.vue index 0b73dc2..a4a454b 100644 --- a/src/views/kc/jiaoshi/index.vue +++ b/src/views/kc/jiaoshi/index.vue @@ -1,64 +1,137 @@ @@ -164,4 +254,10 @@ function bVideoClick(e){ video::-webkit-media-controls-timeline { display: none; } +.green { + color: green; +} +.red { + color: red; +} \ No newline at end of file diff --git a/src/views/kc/jiaoshi/index.vue.左树右直播.bak b/src/views/kc/jiaoshi/index.vue.左树右直播.bak new file mode 100644 index 0000000..386292f --- /dev/null +++ b/src/views/kc/jiaoshi/index.vue.左树右直播.bak @@ -0,0 +1,169 @@ + + + \ No newline at end of file diff --git a/src/views/site/common/video/videojs/util.ts b/src/views/site/common/video/videojs/util.ts index 2527079..a5f5d96 100644 --- a/src/views/site/common/video/videojs/util.ts +++ b/src/views/site/common/video/videojs/util.ts @@ -19,6 +19,23 @@ export function getDefOptions(object) { caches: true, // playbackRates: [1,2,3,4,5,8,10,20], trechIrder: ['flash'], + // controlBar: { + // children: ['FastReplayButton', 'playToggle', 'FastForwardButton', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'fullscreenToggle'] + // , + /*children: [ + "iconPreviousItem", + "Button", + "playToggle", // 播放暂停 + "volumePanel", // 音量 + "volumeMenuButton", + "durationDisplay", + "timeDivider", + "currentTimeDisplay", + "progressControl", + "remainingTimeDisplay", + "fullscreenToggle", // 全屏 + ],*/ + // }, // sources: [{ // // type: 'rtmp/flv', // // src: 'rtmp://127.0.0.1:1935/live/soures', diff --git a/src/views/site/common/video/videojs/video.vue b/src/views/site/common/video/videojs/video.vue index 643128a..c2dea5c 100644 --- a/src/views/site/common/video/videojs/video.vue +++ b/src/views/site/common/video/videojs/video.vue @@ -24,6 +24,7 @@ import { getDefOptions } from '/@/views/site/common/video/videojs/util'; import videojs from "video.js"; import "video.js/dist/video-js.css"; +import video_zhCN from 'video.js/dist/lang/zh-CN.json' const props = defineProps({ videoId: propTypes.string.def('playerId'), @@ -46,8 +47,10 @@ function init(){ sources: [ { type: props.type, src: props.src, } ] }; } + videojs.addLanguage('zh-CN', video_zhCN); + let playerMain = videojs(props.videoId, getDefOptions(Object.assign(option, props.videoOption)),() => { - console.log("加载完成！",playerMain,props.videoOption); + // console.log("加载完成！",playerMain,props.videoOption); emit('loadEnd',playerMain); // playerMain.on('pause', function(...d) { // console.log('点击了？？',...d); @@ -56,8 +59,75 @@ function init(){ // ...so you can do here all the stuff you want while the video is playing // }); + playerMain.language('zh-CN'); + + // console.log('videojs ->',videojs); + }); player.value = playerMain; + + + playerMain.ready(function() { + // playerMain.controlBar.addChild('TitleBar', { + // // text: '快退', + // el: videojs.createEl('button', { + // title: '快退十秒', + // className: 'vjs-icon-previous-item vjs-fast-replay-button vjs-control vjs-button', + // innerHTML: '快退' + // }), + // clickHandler: function() { + // playerMain.currentTime(playerMain.currentTime() - 10); + // } + // }); + + // console.log('videojs ->',videojs); + + // let buttonList:Array = []; + let currentSources:any = playerMain.currentSources(); + // currentSources?.forEach(x => { + // buttonList.push(``); + // }) + let currentSource = currentSources[0]; + + let _playerMain: any = playerMain; + let _videojs: any = videojs; + + _playerMain.controlBar.addChild('Button', { + text: '选择清晰度', + el: _videojs.createEl('button', { + title: '选择清晰度', + className: 'vjs-control', + innerHTML: ` + + ` + }), + clickHandler: function() { + let el:any = playerMain.el().querySelector('.changeDefinitionBtn'); + let currentSources:any = playerMain.currentSources(); + let oldUrl = currentSources[0]?.src; + if(el){ + let suffix = el.options[el.options.selectedIndex].value; + let url = el.dataset.url; + if(url){ + if(suffix){//空的情况下是原画 + url = url.replaceAll('.m3u8',''); + url += suffix + '.m3u8'; + } + if(oldUrl != url){//地址完全一样，别切了，， + playerMain.src([{ type: 'application/x-mpegURL', src: url}]); + playerMain.play(); + } + } + } + } + }); + }); + } defineExpose({ diff --git a/src/views/site/common/video/videojs/viewPage.vue b/src/views/site/common/video/videojs/viewPage.vue index 78cbf72..a34d4dc 100644 --- a/src/views/site/common/video/videojs/viewPage.vue +++ b/src/views/site/common/video/videojs/viewPage.vue @@ -42,7 +42,7 @@
 
- +
@@ -153,13 +153,20 @@ function initVideo(key){ function changeLive(item:any){ let mainVideo = document.querySelector('#mainVideo'); - mainVideo?.player?.src([{ type:'application/x-mpegURL',src: item.pullUrl }]) + mainVideo?.player?.src([{ type:'application/x-mpegURL',src: 'http://127.0.0.1/live_hls/a.m3u8' }]) mainVideoCardBoxTitle.value = item.jsmc+item.xm; + console.log(`🚀 --------------------------------------------------------------------------------🚀`); + console.log(`🚀 ~ file: viewPage.vue:164 ~ changeLive ~ mainVideo?.player:`, mainVideo?.player); + console.log(`🚀 --------------------------------------------------------------------------------🚀`); + let buttonEl = mainVideo?.player.el().querySelector('.changeDefinitionBtn'); + buttonEl.dataset.url = 'http://127.0.0.1/live_hls/a.m3u8'; curentPlayerVideo.value = item; } + + function getSuibi(){ //查询随笔 let param = { diff --git a/src/views/site/utils/index.ts b/src/views/site/utils/index.ts index 2c293e3..5c2d7b9 100644 --- a/src/views/site/utils/index.ts +++ b/src/views/site/utils/index.ts @@ -1,5 +1,7 @@ import { defHttp } from '/@/utils/http/axios'; import { useUserStore } from '/@/store/modules/user'; +import md5 from 'md5'; +import { useMessage } from '/@/hooks/web/useMessage'; /** @@ -49,3 +51,46 @@ export const getSysConfig = ():any => { const { sysConfigInfo } = useUserStore(); return sysConfigInfo??{}; } + +export const getMd5Str = ( str:string ) :string => { + return md5(str); +} + +export const get16BitStr = ( str:string ) :string => { + let val=""; + for(let i = 0; i < str.length; i++){ + if(val == "") + val = str.charCodeAt(i).toString(16); + else + // val += "," + str.charCodeAt(i).toString(16); + val += str.charCodeAt(i).toString(16); + } + return val; +} + +export const getAvyCtrlBaseUrl = ( ip:string, user:string, pwd:string ) :string => { + //pam.push(`live_setParam_enable=`) + return `http://${ip}/cgi-bin/plat.cgi?action=9&user=${user}&pwsd=${getMd5Str(pwd)}&command=1`; +} + +/** + * 获取奥威亚开启直播/关闭直播接口 + * @param ip + * @param user + * @param pwd + * @param isEnable + * @returns + */ +export const getAvyCtrlLiveOpenOrCloseUrl = ( ip:string, user:string, pwd:string, isEnable:boolean ) :string => { + let paramStr = `live_setParam_enable=${isEnable?1:0}`; + return `${getAvyCtrlBaseUrl(ip,user,pwd)}&data=${get16BitStr(paramStr)}`; +} + +export const execAvyApi = (url:string, cellback?):void => { + // const { createMessage } = useMessage(); + defHttp.get({ url }).then(res => { + cellback?cellback(res):null; + console.log('奥威亚返回内容',res); + // createMessage.success("操作成功"); + }) +}