Commit eca96f70fabeabf7705c727fe896db83e9d65e1b

Authored by ww
1 parent dc3aa56e

feat: 视频组件实现flv协议播放

@@ -39,6 +39,8 @@ @@ -39,6 +39,8 @@
39 let loadScriptList = [ 39 let loadScriptList = [
40 { path: './js/plugin/echarts/echarts.js' }, 40 { path: './js/plugin/echarts/echarts.js' },
41 { path: './js/plugin/video/video.min.js' }, 41 { path: './js/plugin/video/video.min.js' },
  42 + { path: './js/plugin/video/flv.min.js' },
  43 + { path: './js/plugin/video/videojs-flvjs.min.js' },
42 { path: './js/plugin/ace/ace.js' }, 44 { path: './js/plugin/ace/ace.js' },
43 ] 45 ]
44 46
@@ -15762,16 +15762,44 @@ class HandleDynamicEffect { @@ -15762,16 +15762,44 @@ class HandleDynamicEffect {
15762 */ 15762 */
15763 videoPlay() { 15763 videoPlay() {
15764 const enumAccessMode = HandleDynamicEffect.enumVideoAccessMode 15764 const enumAccessMode = HandleDynamicEffect.enumVideoAccessMode
15765 - const reg = /(?:.*)(?<=\.)/ 15765 +
  15766 + const VideoPlayerType = {
  15767 + m3u8: 'application/x-mpegURL',
  15768 + mp4: 'video/mp4',
  15769 + webm: 'video/webm',
  15770 + flv: 'video/x-flv',
  15771 + }
  15772 +
  15773 + const isRtspProtocol = (url) => {
  15774 + const reg = /^rtsp:\/\//g;
  15775 + return reg.test(url);
  15776 + };
  15777 +
  15778 + const getExt = (url = '') => {
  15779 + const { pathname } = new URL(url);
  15780 + const reg = /[^.]\w*$/;
  15781 + const mathValue = pathname.match(reg) || [];
  15782 + const ext = (mathValue[0]) || 'webm';
  15783 + return ext
  15784 + }
  15785 +
  15786 + const getVideoTypeByUrl = (url) => {
  15787 + try {
  15788 + const ext = getExt(url)
  15789 + const type = VideoPlayerType[ext];
  15790 + return type ? type : VideoPlayerType.webm;
  15791 + } catch (error) {
  15792 + console.error(error);
  15793 + return VideoPlayerType.webm;
  15794 + }
  15795 + };
  15796 +
  15797 +
15766 const graph = this.graph 15798 const graph = this.graph
15767 const createVideoTemplate = this.createVideoTemplate 15799 const createVideoTemplate = this.createVideoTemplate
15768 const videoPlayConfig = { 15800 const videoPlayConfig = {
15769 controls: true, 15801 controls: true,
15770 autoPlay: true, 15802 autoPlay: true,
15771 - // bigPlayButton: true,  
15772 - // textTrackDisplay: false,  
15773 - // posterImage: false,  
15774 - // errorDisplay: false,  
15775 } 15803 }
15776 for (const record of this.videoRecordList) { 15804 for (const record of this.videoRecordList) {
15777 const { additional = {}, nodeId } = record 15805 const { additional = {}, nodeId } = record
@@ -15799,16 +15827,32 @@ class HandleDynamicEffect { @@ -15799,16 +15827,32 @@ class HandleDynamicEffect {
15799 const idEl = getIdEl() 15827 const idEl = getIdEl()
15800 graph.getModel().beginUpdate() 15828 graph.getModel().beginUpdate()
15801 try { 15829 try {
15802 - let type  
15803 - if (videoUrl.replace(reg, '') === 'm3u8') type = 'application/x-mpegURL'  
15804 - const template = createVideoTemplate(idEl, width, height, videoUrl, type) 15830 + const isFlvUrl = getExt(videoUrl) === 'flv'
  15831 + if (isFlvUrl) {
  15832 +
  15833 + videoPlayConfig = {
  15834 + ...videoPlayConfig,
  15835 + techOrder: ['html5', 'flvjs'],
  15836 + flvjs: {
  15837 + mediaDataSource: {
  15838 + isLive: true,
  15839 + cors: true,
  15840 + withCredentials: false,
  15841 + }
  15842 + },
  15843 + }
  15844 + }
  15845 + const template = createVideoTemplate(idEl, width, height, videoUrl, getVideoTypeByUrl(videoUrl))
15805 cell.setAttribute('label', template) 15846 cell.setAttribute('label', template)
15806 graph.refresh(cell); 15847 graph.refresh(cell);
15807 } finally { 15848 } finally {
15808 graph.getModel().endUpdate() 15849 graph.getModel().endUpdate()
15809 - videojs(idEl, videoPlayConfig, function () {  
15810 - this.play()  
15811 - }) 15850 +
  15851 + setTimeout(() => {
  15852 + videojs(idEl, videoPlayConfig, function () {
  15853 + this.play()
  15854 + })
  15855 + }, 500);
15812 } 15856 }
15813 } 15857 }
15814 15858