视频播放功能

Author: TruthHun88

change.md

@@ -38,9 +38,10 @@
 - [x] 管理后台，恢复和优化附件管理功能
 - [ ] 如果管理员或者用户是书籍项目所有人，则音视频链接支持直链播放，否则对音视频链接进行一定的防盗链处理
 - [ ] 内容阅读页面音频视频播放功能
-    - [ ] 音频和视频播放倍速控制
+    - [x] 音频和视频播放倍速控制
     - [ ] 音视频名称显示
-    - [ ] 视频画中画播放
+    - [x] 视频画中画播放
+    - [x] 禁止音频和视频直接下载
 - [x] 增加和升级API，使小程序和APP支持音频和视频播放，以及图片放大预览
 - [x] 优化`html2json`仓库，解析`HTML`内容，使小程序支持音频和视频播放功能，以及图片放大预览功能
 - [ ] 检测和隐藏相关功能

controllers/DocumentController.go

@@ -31,6 +31,27 @@ import (
 	"github.com/boombuler/barcode/qr"
 )
 
+var (
+	videoBoxFmt = `<div class="video-box">
+	<div class="video-main">
+	  <div class="video-heading">
+		<div class="video-title">%v</div>
+		<div class="video-playbackrate">
+		  <select>
+			<option value="0.7">0.7 倍</option>
+			<option value="1.0" selected>1.0 倍</option>
+			<option value="1.2">1.2 倍</option>
+			<option value="1.5">1.5 倍</option>
+			<option value="2.0">2.0 倍</option>
+		  </select>
+		</div>
+	  </div>
+	  <video controls poster="%v" src="%v" controlslist="nodownload" preload="true">%v</video>
+	</div>
+  </div>
+  `
+)
+
 //DocumentController struct.
 type DocumentController struct {
 	BaseController
@@ -273,8 +294,13 @@ func (this *DocumentController) Read() {
 			medias := []string{"video", "audio"}
 			for _, item := range medias {
 				query.Find(item).Each(func(idx int, sel *goquery.Selection) {
-					sel.SetAttr("controlslist", "nodownload")
-					sel.SetAttr("preload", "true")
+					title := strings.TrimSpace(sel.Text())
+					poster, _ := sel.Attr("poster")
+					src, _ := sel.Attr("src")
+					if item == "video" {
+						sel.BeforeHtml(fmt.Sprintf(videoBoxFmt, title, poster, src, title))
+					}
+					sel.Remove()
 				})
 			}
 

static/css/bookstack.css

@@ -1175,12 +1175,7 @@ li.L1, li.L3, li.L5, li.L7, li.L9{background-color: transparent;}
 .markdown-body audio,.markdown-body video{
     max-width: 100%;
     width: 480px;
-    display: block;
-    margin: 15px 0;
-    cursor: pointer;
 }
-.markdown-body video{border-radius: 5px;}
-
 
 .editormd-preview-container ol.linenums li code, .editormd-html-preview ol.linenums li code{
     display: block;
@@ -1426,4 +1421,43 @@ li.L1, li.L3, li.L5, li.L7, li.L9{background-color: transparent;}
     position: absolute;
     right: 0;
     top: 0;
+}
+
+.video-box{
+    display: block;
+    margin: 15px 0;
+}
+.video-main{
+    position: relative;
+    display: inline-block;
+}
+.video-heading{
+    position: absolute;
+    width: 100%;
+    background-color: rgba(0,0,0,0.3);
+    color: #fff;
+    height: 35px;
+    line-height: 35px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    padding: 0 5px;
+    font-size: 14px;
+}
+.video-heading.hide{
+    display: none;
+}
+.video-main:hover .video-heading.hide{
+    display: block;
+}
+.video-title{margin-right: 65px;text-overflow: ellipsis;overflow: hidden;}
+.video-playbackrate{position: absolute;top: 0;right: 0;z-index: 999;height: 35px;}
+.video-playbackrate select{
+    line-height: 35px;
+    border: 0;
+    height: 35px;
+    position: relative;
+    top: -1px;
+    background: rgba(0,0,0,0.3);
+    color: #fff;
 }

static/js/bookstack.js

@@ -473,7 +473,6 @@ $(function () {
                 break;
             case 39:
                 var href=$(".hung-next a").attr("href");
-                console.log("right",href);
                 if(!$(".hung-next").hasClass("hidden") && href!="#"){
                     load_doc(href,"");
                 }
@@ -487,4 +486,9 @@ $(function () {
             load_doc(location.pathname,"",true);
         }
     }
+
+    $("body").on("change", ".video-playbackrate select", function(e){
+        var _this =$(this),val = _this.val(),video = _this.parents(".video-main").find("video");
+        if (video.length>0) video[0].playbackRate = val
+    })
 });