视频播放

zhiyangdu
1 parent 4c7dfa8d
Showing 1 changed file with 31 additions and 7 deletions
src/pages/index/index.vue
@@ -44,7 +44,7 @@
                     <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay(2)"
                                   ref="videoPlayer"
                                   :playsinline="playsinline"
-                                  :options="playerOptions"
+                                  :options="playerOptions2"
                                   x5-playsinline
                                   webkit-playsinline>
                     </video-player>
@@ -92,7 +92,31 @@
                     fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                     sources: [{
                         type: "video/mp4",
-                        src: "http://wjj.ys2.cnliveimg.com/769/shop/video/2019/03/03/5c7bebffe2a35.MP4"
+                        src: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e09739a07d18.mp4"
+                    }],
+                    hls: true, // 启用hls？
+                    poster: './static/img/index/video1.png', // 你的封面地址
+                    width: document.documentElement.clientWidth || document.body.clientWidth,
+                    notSupportedMessage: '此视频暂无法播放，请稍后再试' //  允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                },
+                playerOptions2: {
+                    events: [],
+                    playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
+                    autoplay: false, // 如果true,浏览器准备好时开始回放。
+                    controls: true, //  控制条
+                    preload: 'auto', // 视频预加载
+                    muted: false, //  默认情况下将会消除任何音频。
+                    loop: false, // 导致视频一结束就重新开始。
+                    language: 'zh-CN',
+                    controlBar: {
+                        timeDivider: true,
+                        durationDisplay: true
+                    },
+                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                    sources: [{
+                        type: "video/mp4",
+                        src: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e0973f0aa9be.mp4"
                     }],
                     hls: true, // 启用hls？
                     poster: './static/img/index/video1.png', // 你的封面地址
@@ -122,11 +146,11 @@
              * @param {object} $event [播放器对象]
              */
             onPlayerPlay(event) {
-                if (event == 1) {
-                    this.playerOptions.sources[0].src= "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e09739a07d18.mp4"
-                } else {
-                    this.playerOptions.sources[0].src= "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e0973f0aa9be.mp4"
-                }
+//                if (event == 1) {
+//                    this.playerOptions.sources[0].src = "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e09739a07d18.mp4"
+//                } else {
+//                    this.playerOptions.sources[0].src = "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e0973f0aa9be.mp4"
+//                }
             },
         }
     }