视频预览使用Dplayer

static/js/home.js

@@ -154,7 +154,7 @@
 
 		function audioPause() {
 			document.getElementById('audiopreview-target').pause();
-			document.getElementById('videopreview-target').pause();
+			dp.pause()
 		}
 
 		
@@ -190,6 +190,39 @@
 				openPhotoSwipe(t);
 			}
 		}
+		vplayderLoad = false;
+		var loadDPlayer = function(url){
+			if (!vplayderLoad) {
+				toastr["info"]("加载预览组件...");
+				includeCss("/static/css/DPlayer.min.css");
+				$.getScript("/static/js/DPlayer.min.js").done(function() {
+					toastr.clear();
+					vplayderLoad = 1;
+					playVideo(url);
+				});
+			}else{
+				playVideo(url);
+			}
+		}
+		var playVideo = function(url){
+			 dp = new DPlayer({
+				container: document.getElementById("videopreview-target"),
+				screenshot: true,
+				video: {
+					url: url
+				},
+			});
+			dp.on("fullscreen", function(){
+				$(".modal-backdrop").hide();
+				$("#side").hide();
+				return false;
+			});
+			dp.on("fullscreen_cancel", function(){
+				$(".modal-backdrop").show();
+				$("#side").show();
+				return false;
+			})
+		}
 		function suffix($fname){
 			alert($fname);
 		}	

static/js/share_dir.js

@@ -21,6 +21,14 @@
                     }),
                 });
             }]);
+            function includeCss(filename) {
+                var head = document.getElementsByTagName('head')[0];
+                var link = document.createElement('link');
+                link.href = filename;
+                link.rel = 'stylesheet';
+                link.type = 'text/css';
+                head.appendChild(link)
+            }
             previewLoad = 0;
             var openPhotoSwipe = function(items) {
                 var pswpElement = document.querySelectorAll('.pswp')[0];
@@ -56,6 +64,39 @@
                 openPhotoSwipe(t);
             }
         }
+        vplayderLoad = false;
+        var loadDPlayer = function(url){
+            if (!vplayderLoad) {
+                toastr["info"]("加载预览组件...");
+                includeCss("/static/css/DPlayer.min.css");
+                $.getScript("/static/js/DPlayer.min.js").done(function() {
+                    toastr.clear();
+                    vplayderLoad = 1;
+                    playVideo(url);
+                });
+            }else{
+                playVideo(url);
+            }
+        }
+        var playVideo = function(url){
+             dp = new DPlayer({
+                container: document.getElementById("videopreview-target"),
+                screenshot: true,
+                video: {
+                    url: url
+                },
+            });
+            dp.on("fullscreen", function(){
+                $(".modal-backdrop").hide();
+                $("#side").hide();
+                return false;
+            });
+            dp.on("fullscreen_cancel", function(){
+                $(".modal-backdrop").show();
+                $("#side").show();
+                return false;
+            })
+        }
         function mobileBind(){
             if($(window).width()<768){
             $('a[ng-click|="selectOrUnselect(item, $event)"]').click(function(event){ 

static/js/share_single.js

@@ -45,8 +45,10 @@
                 }
                 return fmt;
             }
+
             function audioPause() {
                 document.getElementById('preview-target').pause();
+                dp.pause();
             }
             $("#size").html(getSize(shareInfo.fileSize));
             $("#down_num").html(shareInfo.downloadNum);
@@ -64,15 +66,54 @@
                     }
                 });
             });
+            vplayderLoad = false;
+        function includeCss(filename) {
+            var head = document.getElementsByTagName('head')[0];
+            var link = document.createElement('link');
+            link.href = filename;
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            head.appendChild(link)
+        }
+        var loadDPlayer = function(url){
+            if (!vplayderLoad) {
+                toastr["info"]("加载预览组件...");
+                includeCss("/static/css/DPlayer.min.css");
+                $.getScript("/static/js/DPlayer.min.js").done(function() {
+                    toastr.clear();
+                    vplayderLoad = 1;
+                    playVideo(url);
+                });
+            }else{
+                playVideo(url);
+            }
+        }
+        var playVideo = function(url){
+             dp = new DPlayer({
+                container: document.getElementById("preview-target"),
+                screenshot: true,
+                video: {
+                    url: url
+                },
+            });
+            dp.on("fullscreen", function(){
+                $(".modal-backdrop").hide();
+                $("#side").hide();
+                return false;
+            });
+            dp.on("fullscreen_cancel", function(){
+                $(".modal-backdrop").show();
+                $("#side").show();
+                return false;
+            })
+        }
             var openPhotoSwipe = function(pic, ww, hh) {
                 var pswpElement = document.querySelectorAll('.pswp')[0];
-                items= [
+                items = [{
-                        {
                     src: pic,
                     w: ww,
                     h: hh
-                        }
+                }];
-                    ];
                 var options = {
                     history: false,
                     focus: false,
@@ -86,6 +127,7 @@
                 var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                 gallery.init();
             };
+
             if (/\.(gif|jpg|jpeg|png|svg|SVG|GIF|JPG|PNG)$/.test(shareInfo.fileName)) {
                 $.getScript("/static/js/photoswipe.min.js").done(function() {
                     $.getScript("/static/js/photoswipe-ui-default.js").done(function() {
@@ -106,14 +148,14 @@
                 $(".file-sign").html('<i class="fa fa-file-movie-o" aria-hidden="true"></i>')
                 $("#previewButton").click(function() {
                     if (shareInfo.allowPreview) {
-                        $(".previewContent").html('<video id="preview-target" style="width: 100%;object-fit: fill" controls="controls" class="preview"  src="/Share/Preview/'+shareInfo.shareId+'" ></video>');
+                        $(".previewContent").html('<div id="preview-target" style="width: 100%;object-fit: fill" class="preview"></div>');
                         $('#previewModal').modal();
+                        loadDPlayer('/Share/Preview/' + shareInfo.shareId);
                     } else {
                         toastr["error"]("请先登录")
                     }
                 })
-            }
+            } else if (/\.(MP3|mp3|wav|WAV|ogg|OGG)$/.test(shareInfo.fileName)) {
-            else if(/\.(MP3|mp3|wav|WAV|ogg|OGG)$/.test(shareInfo.fileName)){
                 $(".file-sign").html('<i class="fa fa-file-audio-o" aria-hidden="true"></i>');
                 $("#previewButton").click(function() {
                     if (shareInfo.allowPreview) {
@@ -133,8 +175,7 @@
                     $(".file-sign").html('<i class="fa fa-file-powerpoint-o" aria-hidden="true"></i>');
                 } else if (/\.(pdf|PDF)$/.test(shareInfo.fileName)) {
                     $(".file-sign").html('<i class="fa fa-file-pdf-o" aria-hidden="true"></i>');
-                 }
+                } else if (/\.(zip|ZIP|RAR|rar|7z|7Z)$/.test(shareInfo.fileName)) {
-                 else if(/\.(zip|ZIP|RAR|rar|7z|7Z)$/.test(shareInfo.fileName)){
                     $(".file-sign").html('<i class="fa fa-file-archive-o" aria-hidden="true"></i>');
                 } else {
                     $(".file-sign").html('<i class="fa fa-file-text" aria-hidden="true"></i>');