add video preivewer for auto snapshot create

themes/beauty/views/layout/main.php

@@ -14,6 +14,7 @@ require_once __DIR__ . '/../../../../plugins/Html.php';
     <!--for theme beauty-->
     <link href="/css/bootstrap.min.css" rel="stylesheet">
     <link href="/css/fubox.min.css" rel="stylesheet">
+    <link href="/css/video-js.min.css" rel="stylesheet">
     <link href="/css/beauty.css?v<?= Html::getStaticFileVersion('beauty.css', 'css') ?>" rel="stylesheet">
     <link href="/css/github-markdown-light.css" rel="stylesheet" id="markdowncss">
 </head>
@@ -98,6 +99,7 @@ require_once __DIR__ . '/../../../../plugins/Html.php';
     <script src="/js/lazyload.js"></script>
     <script src="/js/fubox.min.js"></script>
     <script src="/js/qrcode.min.js"></script>
+    <script src="/js/video.min.js"></script>
     <script src="/js/beauty.js?v<?= Html::getStaticFileVersion('beauty.js', 'js') ?>"></script>
     <?php echo Html::getGACode(); ?>
 </body>

themes/beauty/views/site/index.php

@@ -259,7 +259,10 @@ eof;
                         echo <<<eof
 <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
     <a href="/site/player?url={$videoUrl}&id={$file['id']}" target="_blank" class="bor_radius" title="{$title} - {$file['filename']}">
-        <img src="/img/beauty/video_snap.jpg" class="bor_radius im_img video-poster" id="poster_{$file['id']}" data-id="{$file['id']}" alt="{$file['filename']}">
+        <img src="/img/beauty/video_snap.jpg" class="bor_radius im_img video-poster" id="poster_{$file['id']}"
+            data-video-id="{$file['id']}"
+            data-video-url="{$file['path']}"
+            alt="{$file['filename']}">
         <div class="im_img_title">
             <span class="right-bottom">
                 {$title}
@@ -292,7 +295,10 @@ eof;
                         echo <<<eof
 <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
     <a href="/site/player?url={$videoUrl}&id={$file['id']}" target="_blank" class="bor_radius" title="{$title} - {$file['filename']}">
-        <img src="/img/beauty/video_snap.jpg" class="bor_radius im_img video-poster" id="poster_{$file['id']}" data-id="{$file['id']}" alt="{$file['filename']}">
+        <img src="/img/beauty/video_snap.jpg" class="bor_radius im_img video-poster" id="poster_{$file['id']}"
+            data-video-id="{$file['id']}"
+            data-video-url="{$file['path']}"
+            alt="{$file['filename']}">
         <div class="im_img_title">
             <span class="right-bottom">
                 {$title}
@@ -321,4 +327,13 @@ if ($total > $viewData['pageSize']) {
     echo $pagination;
 }
 ?>
+</div>
+
+<div class="video_previewer">
+    <video
+        class="video-js vjs-big-play-centered vjs-fluid vjs-16-9"
+        playsinline
+        poster="" 
+        id="pr-player">
+    </video>
 </div>

www/css/beauty.css

@@ -129,6 +129,8 @@ a:link{text-decoration:none}
 .videotitle{max-width:600px;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}
 .playbtn{width:50px;height:50px;position:absolute;left:50%;top:50%;margin-top:-25px;margin-left:-25px}
 .duration{position:absolute;left:5px;bottom:5px;background-color:#222;padding:0 3px;opacity:0.7;border-radius:3px;font-size:12px;color:#FFF}
+.video_previewer{display:none;position:fixed;right:4px;bottom:4px;width:200px;height:112px;overflow:hidden;z-index:1000}
+
 .mt-2{margin-top:2em}
 .mr-1{margin-right:1em}
 

www/js/beauty.js

@@ -212,8 +212,62 @@ var formatDuration = function(duration) {
     return str;
 };
 
+//自动为列表页视频生成封面图并保存
+var noSnapVideos = [];
+if ($('#pr-player').length > 0 && typeof(videojs) != 'undefined') {
+    var myPlayer = videojs('pr-player', {
+        controls: false,
+        autoplay: false,
+        muted: true,
+        preload: 'auto'
+    });
+
+    var mc_video_id = '';
+    var tryToGetVideoSnapshot = function() {
+        if (noSnapVideos.length == 0) {return false;}
+
+        var videoItem = noSnapVideos.pop();
+        mc_video_id = videoItem.id;
+
+        console.log(mc_video_id, videoItem.url);
+        try {
+            myPlayer.src(videoItem.url);
+            myPlayer.play();
+        }catch(err){
+            console.error('自动生成视频封面图失败', err);
+        }
+    };
+
+    myPlayer.on('playing', function() {
+        myPlayer.pause();
+
+        if (typeof(mc_video_id) != 'undefined' && mc_video_id) {
+            var height = myPlayer.videoHeight(), width = myPlayer.videoWidth(),
+                aspect = height / width;
+            var canvas = document.createElement('canvas');
+            var video = $('video.vjs-tech').get(0);
+
+            canvas.width = Math.ceil(360/aspect);
+            canvas.height = 360;    //360p
+
+            var ctx = canvas.getContext('2d');
+            ctx.drawImage( video, 0, 0, canvas.width, canvas.height );
+
+            var snapshotImg = canvas.toDataURL('image/jpeg');
+            saveVideoMeta(mc_video_id, {
+                duration: myPlayer.duration(),
+                snapshot: snapshotImg
+            });
+
+            tryToGetVideoSnapshot();    //go next
+        }
+    });
+
+    setInterval(tryToGetVideoSnapshot, 1000);
+}
+
 //视频列表封面图加载
-var getVideoMetaAndShowIt = function(videoId) {
+var getVideoMetaAndShowIt = function(videoId, videoUrl) {
     $.ajax({
         url: '/site/videometa',
         method: 'GET',
@@ -223,7 +277,8 @@ var getVideoMetaAndShowIt = function(videoId) {
         }
     }).done(function(data) {
         if (data.code != 1) {
-            console.warn('视频数据获取失败', data.msg);
+            console.warn(data.msg);
+            noSnapVideos.push({id: videoId, url: videoUrl});
         }else {
             $('#poster_'+videoId).attr('src', data.meta.snapshot);
             $('#poster_'+videoId).parent('a').find('.duration').text(formatDuration(data.meta.duration));
@@ -234,8 +289,9 @@ var getVideoMetaAndShowIt = function(videoId) {
 };
 
 $('.video-poster').each(function(index, el) {
-    var videoId = $(el).attr('data-id');
-    getVideoMetaAndShowIt(videoId);
+    var videoId = $(el).attr('data-video-id'),
+        videoUrl = $(el).attr('data-video-url');
+    getVideoMetaAndShowIt(videoId, videoUrl);
 });
 
 //保存视频数据
@@ -266,7 +322,7 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
         preload: 'auto'
     });
 
-    myPlayer.one('play', function() {
+    myPlayer.one('playing', function() {
         myPlayer.pause();
 
         var height = myPlayer.videoHeight(), width = myPlayer.videoWidth(),