播放功能

zhiyangdu
1 parent f05b08a2
Showing 1 changed file with 53 additions and 3 deletions
src/pages/index/index.vue
@@ -11,7 +11,15 @@
                 </div>
             </div>
             <!--视频-->
-            <div></div>
+            <div>
+                <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay($event)"
+                              ref="videoPlayer"
+                              :playsinline="playsinline"
+                              :options="playerOptions"
+                              x5-playsinline
+                              webkit-playsinline>
+                </video-player>
+            </div>
             <div></div>
@@ -46,15 +54,57 @@
 </template>
 <script>
+    import { videoPlayer } from 'vue-video-player';
+    import 'video.js/dist/video-js.css';
+    import '../../../static/css/video.css';
     export default {
         name: 'index',
         data () {
-            return {}
+            return {
+                playsinline: true,
+                playerOptions: {
+                    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: [],
+                    hls: true, // 启用hls？
+                    poster: '../../../static/img/index/15.jpg', // 你的封面地址
+                    width: document.documentElement.clientWidth || document.body.clientWidth,
+                    notSupportedMessage: '此视频暂无法播放，请稍后再试' //  允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                },
+            }
+        },
+        components:{
+            videoPlayer
         },
         created(){
         },
-        methods: {}
+        methods: {
+            /**
+             * 视频播放
+             * @param {object} $event [播放器对象]
+             */
+            onPlayerPlay($event) {
+                if(this.isiPhone.value && window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.CNDSPlayer) {
+                    window.webkit.messageHandlers.CNDSPlayer.postMessage({body: {
+                        playUrl: this.playerOptions.sources[0].src, // 视频URL
+                        isLive: 0 // 0录播1直播
+                    }});
+                }
+            },
+        }
     }
 </script>