测试video

src/frontend/views/test/index.php

@@ -18,21 +18,109 @@
         <link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
         <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
         <script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
+        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
 
+        <style>
+
+            /*审核中视频样式*/
+            .video-main {
+                position: relative;
+                height: 500px;
+                width: 100%;
+                background-color: #444;
+                color: #fff;
+                text-align: center;
+            }
+            .video-main i {
+                display: block;
+                font-size: 48px;
+                padding-top: 170px;
+                padding-bottom: 40px;
+            }
+            .video-main > p {
+                font-size: 16px;
+                margin-top: 40px;
+                line-height: 1.8;
+            }
+            /*videojs reset*/
+            .vjs-big-play-centered .vjs-big-play-button {
+                z-index: 2!important;
+            }
+            .video-js .vjs-mute-control, .video-js .vjs-volume-menu-button, .vjs-icon-volume-high {
+                font-size: 12px;
+            }
+            .video-js .vjs-big-play-button, .video-js .vjs-play-control, .vjs-icon-play {
+                font-size: 13px;
+            }
+            .video-js .vjs-fullscreen-control {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+            }
+            .video-js .vjs-control-bar {
+                background-color: transparent!important;
+                bottom: 6px!important;
+            }
+            .video-js .vjs-progress-control {
+                position: absolute!important;
+                width: 100%!important;
+                left: 0!important;
+                bottom: 26px!important;
+            }
+            .vjs-fullscreen-control {
+                position: absolute!important;
+                right: 0!important;
+                bottom: 0!important;
+            }
+            .vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control {
+                font-size: 12px;
+            }
+            .vjs-remaining-time {
+                position: absolute!important;
+                right: 50px;
+            }
+            .video-js .vjs-play-progress {
+                background-color: #f12b24!important;
+            }
+        </style>
     </head>
 
 </head>
 
 <body>
 
-<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://img.c.pp.cc/preview/53/5c/de/YeTMnlVXEeeX2500.jpg-l.preview" data-setup="{}">
-    <source src="http://vdn.c.pp.cc/free/21/c9/e1/71O8rEzYiOUxp2N3p8k9.mp4?e=1477984337&token=Tm34_10r5kYLrUProU3Rx82HXCOnYuF8MhirB_YR:c2sU88scg6ePLF8l2UEXdglXCtU=" type="video/mp4">
-    <track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
-    <!-- Tracks need an ending tag thanks to IE9 -->
-    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
-    <!-- Tracks need an ending tag thanks to IE9 -->
-    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
-</video>
-</body>
+<div style="width:100%;height:100%" class="video-main">
+    <video id="my-video-play" class="video-js vjs-default-skin vjs-big-play-centered"  preload="none" width="640" height="264"
+           poster="http://img.c.pp.cc/preview/53/5c/de/YeTMnlVXEeeX2500.jpg-l.preview" data-setup="{}">
+        <source
+            src="http://vdn.c.pp.cc/free/21/c9/e1/71O8rEzYiOUxp2N3p8k9.mp4?e=1477984337&token=Tm34_10r5kYLrUProU3Rx82HXCOnYuF8MhirB_YR:c2sU88scg6ePLF8l2UEXdglXCtU="
+            >
+        <!-- Tracks need an ending tag thanks to IE9 -->
+    </video>
+</div>
 
+</body>
+<script>
+    window.VIDEOJS_NO_BASE_THEME = true;
+    var rate = 9 / 16;
+    var w = $('.video-main').width();
+    var h = w * rate;
+    var myPlayer = videojs("my-video-play", {
+        "controls": true,
+        "autoplay": false,
+        "language": "zh-CN",
+        "width": w,
+        "height": h,
+    }).ready(function () {
+        $('#my-video-play').css('width', '100%');
+        var wVideo = $('#my-video-play').width();
+        var hVideo = wVideo * rate;
+        $('#my-video-play').css('height', hVideo);
+        window.onresize = function () {
+            var wVideo = $('#my-video-play').width();
+            var hVideo = wVideo * rate;
+            $('#my-video-play').css('height', hVideo);
+        };
+    });
+</script>
 </html>

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

@@ -72,6 +72,7 @@
                 var h = w * rate;
                 var myPlayer = videojs("my-video-play", {
                     "techOrder": ['html5', 'flash'],
+                    "customControlsOnMobile":true,
                     "controls": true,
                     "autoplay": false,
                     "language": "zh-CN",
@@ -88,7 +89,7 @@
                         var hVideo = wVideo * rate;
                         $('#my-video-play').css('height', hVideo);
                     };
-                })
+                });
                 //没购买显示
                 if (this.videoInfo.isShop == false) {
                     myPlayer.on('play', function () {