diff --git a/frontend/package.json b/frontend/package.json index e0c6fa78f8..a1d0d4da34 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,6 +27,7 @@ "file-save": "^0.2.0", "file-saver": "^2.0.5", "fit2cloud-ui": "1.5.4", + "flv.js": "^1.6.2", "html2canvasde": "^v1.1.4-de", "jquery": "^3.1.1", "js-base64": "^3.7.2", diff --git a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue new file mode 100644 index 0000000000..d06d19b54c --- /dev/null +++ b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue @@ -0,0 +1,151 @@ + + + + + diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue index 3f89341cc8..ec18af4c13 100644 --- a/frontend/src/components/canvas/components/TextAttr.vue +++ b/frontend/src/components/canvas/components/TextAttr.vue @@ -134,6 +134,12 @@ +
+ + + +
+
@@ -159,12 +165,13 @@ import { mapState } from 'vuex' import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks' import VideoLinks from '@/components/canvas/components/Editor/VideoLinks' +import StreamMediaLinks from '@/components/canvas/components/Editor/StreamMediaLinks' import DateFormat from '@/components/canvas/components/Editor/DateFormat' import { COLOR_PANEL } from '@/views/chart/chart/chart' import FrameLinks from '@/components/canvas/components/Editor/FrameLinks' export default { - components: { FrameLinks, Hyperlinks, DateFormat, VideoLinks }, + components: { FrameLinks, Hyperlinks, DateFormat, VideoLinks, StreamMediaLinks }, props: { scrollLeft: { type: Number, @@ -294,11 +301,14 @@ export default { 'backgroundColor', 'hyperlinks' ], - // 文本组件显示的属性 'de-video': [ 'opacity', 'videoLinks' ], + 'de-stream-media': [ + 'opacity', + 'streamMediaLinks' + ], 'de-frame': [ 'opacity', 'frameLinks' diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue new file mode 100644 index 0000000000..c1920f07db --- /dev/null +++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index 78dfb8cd48..397f696cbf 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -96,7 +96,18 @@ export const VIDEOLINKS = { } } } +} +// 流媒体视频信息配置 +export const STREAMMEDIALINKS = { + videoType: 'flv', + flv: { + type: 'flv', + isLive: false, + cors: true, // 允许跨域 + loop: true + // url: null // 网络动画视频 + } } // 嵌套页面信息 @@ -148,6 +159,14 @@ export const pictureList = [ label: '视频', icon: 'iconfont icon-video', defaultClass: 'text-filter' + }, + { + id: '20003', + component: 'stream-media', + type: 'stream-media', + label: '流媒体', + icon: 'iconfont icon-a-liumeitimeitiliebiao', + defaultClass: 'text-filter' } ] @@ -441,6 +460,27 @@ const list = [ sizey: 5, miniSizex: 1, miniSizey: 1 + }, + { + id: '20003', + component: 'de-stream-media', + type: 'de-stream-media', + label: '', + icon: 'iconfont icon-picture', + defaultClass: 'text-filter', + mobileStyle: BASE_MOBILE_STYLE, + style: { + width: 400, + height: 200, + borderRadius: '' + }, + streamMediaLinks: STREAMMEDIALINKS, + x: 1, + y: 1, + sizex: 10, + sizey: 5, + miniSizex: 1, + miniSizey: 1 } ] diff --git a/frontend/src/components/canvas/custom-component/index.js b/frontend/src/components/canvas/custom-component/index.js index 6316c79087..6d9145a740 100644 --- a/frontend/src/components/canvas/custom-component/index.js +++ b/frontend/src/components/canvas/custom-component/index.js @@ -8,7 +8,9 @@ import RectShape from '@/components/canvas/custom-component/RectShape' import UserView from '@/components/canvas/custom-component/UserView' import DeVideo from '@/components/canvas/custom-component/DeVideo' import DeFrame from '@/components/canvas/custom-component/DeFrame' +import DeStreamMedia from '@/components/canvas/custom-component/DeStreamMedia' +Vue.component('DeStreamMedia', DeStreamMedia) Vue.component('Picture', Picture) Vue.component('VText', VText) Vue.component('VButton', VButton) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 82636e1774..9758b4c53b 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1392,6 +1392,11 @@ export default { sure_bt: 'Confirm' }, panel: { + is_live: 'Is Live', + yes: 'Yes', + no: 'No', + live_tips: 'User Https First', + stream_media_add_tips: 'Please Add Stream Media Info...', json_params_error: 'Third Party Parameters Parsing Failed. Please Check Whether The Parameters Format Is Correct', inner_padding: 'Inner Padding', board_radio: 'Board Radio', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 45d46c9c11..8a8bfa1c4b 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1393,6 +1393,11 @@ export default { sure_bt: '確定' }, panel: { + is_live: '是否直播', + yes: '是', + no: '否', + live_tips: '优先HTTPS链接', + stream_media_add_tips: '请点击添加配置流媒体信息...', json_params_error: '第三方参数解析失败，请检查参数格式是否正确', inner_padding: '内边距', board_radio: '边框半径', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index e20dc71f45..f29106533f 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1401,6 +1401,11 @@ export default { sure_bt: '确定' }, panel: { + is_live: '是否直播', + yes: '是', + no: '否', + live_tips: '优先HTTPS链接', + stream_media_add_tips: '请点击添加配置流媒体信息...', json_params_error: '第三方参数解析失败，请检查参数格式是否正确', inner_padding: '内边距', board_radio: '边框半径', diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index e4e8b61d73..5b5669ac90 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -54,6 +54,12 @@
    +
  • + +
    流媒体，媒体列表
    +
    
    +
    • +
  • iframe
    @@ -522,9 +528,9 @@ 
    @font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1648367037728') format('woff2'),
-       url('iconfont.woff?t=1648367037728') format('woff'),
-       url('iconfont.ttf?t=1648367037728') format('truetype');
+  src: url('iconfont.woff2?t=1648734668996') format('woff2'),
+       url('iconfont.woff?t=1648734668996') format('woff'),
+       url('iconfont.ttf?t=1648734668996') format('truetype');
 }

    第二步：定义使用 iconfont 的样式

    @@ -550,6 +556,15 @@
      +
    • + +
      + 流媒体，媒体列表 +
      +
      .icon-a-liumeitimeitiliebiao +
      +
      • +
    • @@ -1252,6 +1267,14 @@
        +
      • + +
        流媒体，媒体列表
        +
        #icon-a-liumeitimeitiliebiao
        +
        • +