电子站牌项目

1、完善bsth-slide轮播组件，可以轮播视频，轮播到视频时，等视频播完后，继续轮播

电子站牌项目
1、完善bsth-slide轮播组件，可以轮播视频，轮播到视频时，等视频播完后，继续轮播
徐烜
1 parent 0f8401fc
Showing 3 changed files with 118 additions and 11 deletions
front-end/h5/src/components/core/plugins/bsth-slide__editor.js
front-end/h5/src/components/core/plugins/bsth/bsth-slide.css
front-end/h5/src/components/core/plugins/bsth/bsth-slide.js
@@ -27,6 +27,9 @@ export default {
       current: 1 // 下标从1开始
     }
   },
+  mounted () {
+    this.current = this.elementProps.activeIndex + 1
+  },
   methods: {
     p_change (page) { // 分页条change事件处理器
       this.current = page
+.myVideoPlayer video {
+    /*width: 100%;*/
+    /*height: 100%;*/
+    object-fit: fill; /* 去除两侧的留白 */
+}
@@ -6,11 +6,13 @@ import PropTypes from &#39;@luban-h5/plugin-common-props&#39;
 import { Swipe, SwipeItem } from 'vant'
 import 'vant/lib/swipe/style'
 import 'vant/lib/swipe-item/style'
-import { VideoPlayer } from 'vue-video-player'
+import { videoPlayer } from 'vue-video-player'
 import 'video.js/dist/video-js.css'
 import { GalleryValue, GalleryValueType } from 'core/support/resource-gallery/components/galleryValue'
+import './bsth-slide.css'
+
 function getDefaultItems () {
   const defaultItems = [ // TODO：目前鲁班的后端渲染引擎处理不了组件属性的自定义类型，所以自定义转换成普通对象
     new GalleryValue({ type: GalleryValueType.IMAGE, url: 'https://img.yzcdn.cn/vant/apple-1.jpg' }).toObject(),
@@ -30,7 +32,13 @@ export default {
   },
   name: 'bsth-slide',
   data () {
-    return {}
+    // eslint-disable-next-line
+    this.private_jQuery = jQuery.noConflict() // jquery引用
+    return {
+      innerInterval: 0, // 初始化值为 this.interval
+      videoWidth: 0, // 视频 SwipItem 宽度
+      videoHeight: 0 // 视频 SwipItem 高度
+    }
   },
   props: {
     editorMode: PropTypes.string({ // 编辑模式会由编辑器自动注入（值：edit, preview）
@@ -59,25 +67,116 @@ export default {
   render () {
     const { items, activeIndex } = this
     if (this.editorMode === 'edit') { // 如果是编辑状态显示item中的activeIndex下标项
-      if (items.length > 0) {
-        return (<div><p>{items[activeIndex].url}</p></div>)
-      } else {
-        return (<div><p>无轮播项目</p></div>)
-      }
+      return this.renderSwipeItemWithEdit(items[activeIndex])
     } else {
       return (
-        <Swipe autoplay={+this.interval} indicator-color="red">
+        <Swipe onChange={this.swipeChange} autoplay={+this.innerInterval} indicator-color="red">
           {
             items.map(item => (
-              <SwipeItem><p>{item.url}</p></SwipeItem>
+              this.renderSwipeItemWithPreview(item)
             ))
           }
         </Swipe>
       )
     }
   },
-  mounted () {},
+  mounted () {
+    this.innerInterval = this.interval
+
+    // 使用外部元素的框架定义视频的长宽
+    let $jQuery = this.private_jQuery
+    this.videoWidth = $jQuery(this.$el).width()
+    this.videoHeight = $jQuery(this.$el).height()
+  },
   destroyed () {},
   watch: {},
-  methods: {}
+  methods: {
+    swipeChange (index) {
+      const gItem = GalleryValue.toGalleryValue(this.items[index])
+      if (gItem.type === GalleryValueType.VIDEO) {
+        this.innerInterval = null
+        let myVideo = this.$refs[gItem.url].player
+        myVideo.play()
+      }
+    },
+    onPlayEnded () {
+      this.innerInterval = this.interval
+    },
+    renderSwipeItemWithEdit (item) {
+      const gItem = GalleryValue.toGalleryValue(item)
+      switch (gItem.type) {
+        case GalleryValueType.IMAGE :
+          return (<div><img src={gItem.url} width="100%" height="100%" /></div>)
+        case GalleryValueType.VIDEO :
+          return (<div><h1>预览模式查看</h1></div>)
+        default :
+          return (<div><p>无轮播项目</p></div>)
+      }
+    },
+    renderSwipeItemWithPreview (item) {
+      const gItem = GalleryValue.toGalleryValue(item)
+      const swipeItemWithout = (
+        <SwipeItem>未知</SwipeItem>
+      )
+      const swipeItemWithImage = (
+        <SwipeItem><img src={gItem.url} width="100%" height="100%" /></SwipeItem>
+      )
+      const playerOptions = {
+        // 播放速度
+        playbackRates: [0.5, 1.0, 1.5, 2.0],
+        // 如果true,浏览器准备好时开始回放。
+        autoplay: true,
+        // 默认情况下将会消除任何音频（设置为true，才能游览器自动播放，否则报错）。
+        muted: true,
+        // 导致视频一结束就重新开始。
+        loop: false,
+        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        preload: 'auto',
+        language: 'zh-CN',
+        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        // aspectRatio: '4:3',
+        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        // fluid: true,
+        width: this.videoWidth,
+        height: this.videoHeight,
+        sources: [{
+          // 类型
+          type: 'video/mp4',
+          // url地址
+          src: gItem.url
+        }],
+        // 你的封面地址
+        poster: '',
+        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        notSupportedMessage: '此视频暂无法播放，请稍后再试',
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          // 全屏按钮
+          fullscreenToggle: true
+        }
+      }
+      const swipeItemWithVideoRef = item.url
+      const swipeItemWithVideo = (
+        <SwipeItem>
+          <videoPlayer
+            ref={swipeItemWithVideoRef}
+            class="video-player vjs-custom-skin myVideoPlayer"
+            playsinline={true}
+            options={playerOptions}
+            onEnded={this.onPlayEnded}
+          />
+        </SwipeItem>
+      )
+      switch (gItem.type) {
+        case GalleryValueType.IMAGE :
+          return swipeItemWithImage
+        case GalleryValueType.VIDEO :
+          return swipeItemWithVideo
+        default :
+          return swipeItemWithout
+      }
+    }
+  }
 }