修改video

src/frontend/web/js/home/components/video-play.vue

@@ -8,14 +8,7 @@
                 <a href="javascript:;" class="qzone post-icons bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
             </div>
         </div>
-
-        <div v-show="videoShow" class="video-main">
-            <video id="my-video-play" class="video-js vjs-default-skin vjs-big-play-centered"
-                   controls preload="auto">
-                <source :src="coursewareInfo.videoUrl"/>
-            </video>
-        </div>
-
+        <myvideo :preview-url="coursewareInfo.previewUrl" :video-url="coursewareInfo.videoUrl"></myvideo>
         <div class="video-detail-info">
             <div v-for="(index,item) in coursewareInfo.teachers" class="video-teacher">
                 <a data-toggle="modal" data-target="{{{'#teacherInfo'+index}}}"><img
@@ -110,14 +103,8 @@
     </div>
 </template>
 <script>
-
-    require('expose?videojs!../../libs/videojs/video.js');
-    require('../../libs/videojs/video-js.css');
-    require('../../libs/videojs/lang/zh-CN.js');
-    videojs.options.flash.swf = __CDN_URL__ + 'assets/videojs/video-js.swf';
-    window.VIDEOJS_NO_BASE_THEME = true;
-
     import Utils from '../../libs/utils';
+    import myvideo from './video.vue';
     export default{
         data(){
             return {
@@ -242,30 +229,14 @@
                 require: true
             }
         },
-        components: {},
+        components: {
+            myvideo:myvideo
+        },
         ready(){
             var self = this;
             this.isMobile = this.coursewareInfo.isMobile;
             this.isWeixin = Utils.isWeixin();
-            videojs("my-video-play", {
-		        "techOrder": ['html5','flash'],
-                "controls": true,
-                "autoplay": false,
-                "language": "zh-CN",
-                poster: this.coursewareInfo.previewUrl
-            }).ready(function () {
-                var rate = 9 / 16;
-                $('#my-video-play').css('width', '100%');
-                var wVideo = $('.video-detail-info').width();
-                var hVideo = wVideo * rate;
-                $('#my-video-play').css('height', hVideo);
-                window.onresize = function () {
-                    var wVideo = $('.video-detail-info').width();
-                    var hVideo = wVideo * rate;
-                    $('#my-video-play').css('height', hVideo);
-                };
-                self.videoShow = true;
-            });
+
         }
     }
 
@@ -276,5 +247,6 @@
 
 
 
+
 </script>
 

src/frontend/web/js/home/components/video.vue

+<template>
+    <div style="width:100%;height:100%" class="video-main">
+        <video id="my-video-play" class="video-js vjs-default-skin vjs-big-play-centered"
+               controls preload="auto">
+            <source :src="videoUrl"/>
+        </video>
+    </div>
+</template>
+
+<script>
+    require('expose?videojs!../../libs/videojs/video.js');
+    require('../../libs/videojs/video-js.css');
+    require('../../libs/videojs/lang/zh-CN.js');
+    videojs.options.flash.swf = __CDN_URL__ + 'assets/videojs/video-js.swf';
+    window.VIDEOJS_NO_BASE_THEME = true;
+    export default{
+        data(){
+            return{
+            }
+        },
+        props:{
+            videoUrl:String,
+            previewUrl:String
+        },
+        ready(){
+            var self = this;
+            var rate = 9 / 16;
+            var w = $('.video-main').width();
+            var h = w * rate;
+            videojs("my-video-play", {
+		        "techOrder": ['html5','flash'],
+                "controls": true,
+                "autoplay": false,
+                "language": "zh-CN",
+                "width":w,
+                "height":h,
+                "poster": self.previewUrl
+            }).ready(function () {
+                $('#my-video-play').css('width', '100%');
+                var wVideo = $('.video-detail-info').width();
+                var hVideo = wVideo * rate;
+                $('#my-video-play').css('height', hVideo);
+                window.onresize = function () {
+                    var wVideo = $('.video-detail-info').width();
+                    var hVideo = wVideo * rate;
+                    $('#my-video-play').css('height', hVideo);
+                };
+            });
+        }
+    }
+
+
+
+
+</script>