!222 更换视频播放插件为ckplayer,新增mpd,m3u8,ts,mpeg,m4a格式支持

Merge pull request !222 from 高雄/vode

server/src/main/config/application.properties

@@ -91,7 +91,7 @@ ftp.control.encoding = ${KK_FTP_CONTROL_ENCODING:UTF-8}
 
 #视频设置
 #多媒体类型，默认如下，可自定义添加
-media = ${KK_MEDIA:mp3,wav,mp4,flv}
+media = ${KK_MEDIA:mp3,wav,mp4,flv,mpd,m3u8,ts,mpeg,m4a}
 #是否开启多媒体类型转视频格式转换,目前可转换视频格式有：avi,mov,wmv,3gp,rm
 #请谨慎开启此功能，建议异步调用添加到处理队列，并且增加任务队列处理线程，防止视频转换占用完线程资源，转换比较耗费时间,并且控制了只能串行处理转换任务
 media.convert.disable = ${KK_MEDIA_CONVERT_DISABLE:false}

server/src/main/java/cn/keking/model/FileType.java

@@ -21,7 +21,6 @@ public enum FileType {
     MEDIA("mediaFilePreviewImpl"),
     MARKDOWN("markdownFilePreviewImpl"),
     XML("xmlFilePreviewImpl"),
-    FLV("flvFilePreviewImpl"),
     CAD("cadFilePreviewImpl"),
     TIFF("tiffFilePreviewImpl"),
     OFD("ofdFilePreviewImpl"),
@@ -111,7 +110,6 @@ public enum FileType {
         }
         FILE_TYPE_MAPPER.put("md", FileType.MARKDOWN);
         FILE_TYPE_MAPPER.put("pdf", FileType.PDF);
-        FILE_TYPE_MAPPER.put("flv", FileType.FLV);
         FILE_TYPE_MAPPER.put("bpmn", FileType.BPMN);
     }
 

server/src/main/java/cn/keking/service/FilePreview.java

@@ -9,7 +9,6 @@ import org.springframework.ui.Model;
  */
 public interface FilePreview {
 
-    String FLV_FILE_PREVIEW_PAGE = "flv";
     String PDF_FILE_PREVIEW_PAGE = "pdf";
     String PPT_FILE_PREVIEW_PAGE = "ppt";
     String COMPRESS_FILE_PREVIEW_PAGE = "compress";

server/src/main/java/cn/keking/service/impl/FlvFilePreviewImpl.java

@@ -1,27 +0,0 @@
-package cn.keking.service.impl;
-
-import cn.keking.model.FileAttribute;
-import cn.keking.service.FilePreview;
-import org.springframework.stereotype.Service;
-import org.springframework.ui.Model;
-
-/**
- * @author : kl
- * create : 2020-12-27 2:50 下午
- * flv文件预览处理实现
- **/
-@Service
-public class FlvFilePreviewImpl implements FilePreview {
-
-    private final MediaFilePreviewImpl mediaFilePreview;
-
-    public FlvFilePreviewImpl(MediaFilePreviewImpl mediaFilePreview) {
-        this.mediaFilePreview = mediaFilePreview;
-    }
-
-    @Override
-    public String filePreviewHandle(String url, Model model, FileAttribute fileAttribute) {
-        mediaFilePreview.filePreviewHandle(url,model,fileAttribute);
-        return FLV_FILE_PREVIEW_PAGE;
-    }
-}

server/src/main/resources/static/ckplayer/language/en.js

@@ -0,0 +1,72 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.ckplayerLanguage = factory());
+}(this, function () { 'use strict';
+	/*
+	 * 功能：包含播放器用到的全部相关语言文字
+	 */
+	var language={
+		play:'Play',
+		pause:'Pause',
+		refresh:'Refresh',
+		full:'Fullscreen',
+		exitFull:'Non-Fullscreen',
+		webFull:'Web fullscreen',
+		exitWebFull:'Non-Web fullscreen',
+		theatre:'Theatre',
+		exitTheatre:'Non-theatre',
+		volume:'Volume：',
+		muted:'Mute',
+		exitmuted:'Unmute',
+		seek:'Seek：',
+		waiting:'Waiting',
+		live:'Liveing',
+		backLive:'Back live',
+		lookBack:'Look back：',
+		next:'Next episode',
+		screenshot:'Screenshot',
+		smallwindows:'Small windows',
+		playbackrate:'Speed',
+		playbackrateSuffix:' Speed',
+		track:'Subtitle',
+		noTrack:'No subtitle',
+		definition:'Definition',
+		switchTo:'Switched from：',
+		closeTime:'The advertisement can be closed in {seconds} seconds',
+		closeAd:'Close ad',
+		second:'seconds',
+		details:'View details',
+		copy:'Copy',
+		copySucceeded:'Copy succeeded, can be pasted!',
+		smallwindowsOpen:'The small window function is turned on',
+		screenshotStart:'Screenshot, please wait...',
+		smallwindowsClose:'The small window function is turned off',
+		screenshotClose:'Screenshot function is turned off',
+		loopOpen:'Loop open',
+		loopClose:'Loop close',
+		close:'Close',
+		down:'Down',
+		p50:'50%',
+		p75:'75%',
+		p100:'100%',
+		timeScheduleAdjust:{
+			prohibit:'No dragging',
+			prohibitBackOff:'No repeat viewing',
+			prohibitForward:'Fast forward prohibited',
+			prohibitLookBack:'Some content is forbidden to play',
+			prohibitForwardNotViewed:'Disable playback of parts not viewed'
+		},
+		error:{
+			noMessage:'Unknown error',
+			supportVideoError:'The browser version is too low. It is recommended to replace it with another browser',
+			videoTypeError:'This browser does not support playing this video. It is recommended to replace it with another browser',
+			loadingFailed:'Loading failed',
+			emptied:'An error occurred while loading the frequency file',
+			screenshot:'Screenshot failed',
+			ajax:'Ajax data request error',
+			noVideoContainer:'No video container'
+		}
+	};
+	return language;
+}))

server/src/main/resources/static/ckplayer/language/zh.cn.js

@@ -0,0 +1,72 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.ckplayerLanguage = factory());
+}(this, function () { 'use strict';
+	/*
+	 * 功能：包含播放器用到的全部相关语言文字
+	 */
+	var language={
+		play:'播放',
+		pause:'暂停',
+		refresh:'重播',
+		full:'全屏',
+		exitFull:'退出全屏',
+		webFull:'页面全屏',
+		exitWebFull:'退出页面全屏',
+		theatre:'剧场模式',
+		exitTheatre:'退出剧场模式',
+		volume:'音量：',
+		muted:'静音',
+		exitmuted:'恢复音量',
+		seek:'seek：',
+		waiting:'缓冲',
+		live:'直播中',
+		backLive:'返回直播',
+		lookBack:'回看：',
+		next:'下一集',
+		screenshot:'视频截图',
+		smallwindows:'小窗口播放功能',
+		playbackrate:'倍速',
+		playbackrateSuffix:'倍',
+		track:'字幕',
+		noTrack:'无字幕',
+		definition:'清晰度',
+		switchTo:'切换成：',
+		closeTime:'{seconds}秒后可关闭广告',
+		closeAd:'关闭广告',
+		second:'秒',
+		details:'查看详情',
+		copy:'复制',
+		copySucceeded:'复制成功，可贴粘！',
+		smallwindowsOpen:'小窗口功能已开启',
+		smallwindowsClose:'小窗口功能已关闭',
+		screenshotStart:'截图中，请稍候...',
+		screenshotClose:'截图功能已关闭',
+		loopOpen:'循环播放',
+		loopClose:'已关闭循环播放',
+		close:'关闭',
+		down:'下载',
+		p50:'50%',
+		p75:'75%',
+		p100:'100%',
+		timeScheduleAdjust:{
+			prohibit:'视频禁止拖动',
+			prohibitBackOff:'视频禁止重复观看',
+			prohibitForward:'视频禁止快进',
+			prohibitLookBack:'视频禁止播放部分内容',
+			prohibitForwardNotViewed:'视频禁止播放未观看的部分'
+		},
+		error:{
+			noMessage:'未知错误',
+			supportVideoError:'该浏览器版本太低，建议更换成其它浏览器',
+			videoTypeError:'该浏览器不支持播放该视频，建议更换成其它浏览器',
+			loadingFailed:'加载失败',
+			emptied:'视频文件加载过程中出现错误',
+			screenshot:'视频截图失败',
+			ajax:'Ajax数据请求错误',
+			noVideoContainer:'未找到放置视频的容器'
+		}
+	};
+	return language;
+}))

server/src/main/resources/static/ckplayer/language/zh.hk.js

@@ -0,0 +1,72 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.ckplayerLanguage = factory());
+}(this, function () { 'use strict';
+	/*
+	 *功能：包含播放機用到的全部相關語言文字
+	 */
+	var language = {
+		play: '播放',
+		pause: '暫停',
+		refresh: '重播',
+		full: '全屏',
+		exitFull: '退出全屏',
+		webFull: '頁面全屏',
+		exitWebFull: '退出頁面全屏',
+		theatre: '劇場模式',
+		exitTheatre: '退出劇場模式',
+		volume: '音量：',
+		muted: '靜音',
+		exitmuted: '恢復音量',
+		seek: 'seek:',
+		waiting: '緩衝',
+		live: '直播中',
+		backLive: '返回直播',
+		lookBack: '回看：',
+		next: '下一集',
+		screenshot: '視頻截圖',
+		smallwindows: '小視窗播放功能',
+		playbackrate: '倍速',
+		playbackrateSuffix: '倍',
+		track: '字幕',
+		noTrack: '無字幕',
+		definition: '清晰度',
+		switchTo: '切換成：',
+		closeTime: '{seconds}秒後可關閉廣告',
+		closeAd: '關閉廣告',
+		second: '秒',
+		details: '查看詳情',
+		copy: '複製',
+		copySucceeded: '複製成功,可貼粘！',
+		smallwindowsOpen: '小視窗功能已開啟',
+		smallwindowsClose: '小視窗功能已關閉',
+		screenshotStart: '截圖中,請稍候…',
+		screenshotClose: '截圖功能已關閉',
+		loopOpen: '迴圈播放',
+		loopClose: '已關閉迴圈播放',
+		close: '關閉',
+		down: '下載',
+		p50: '50%',
+		p75: '75%',
+		p100: '100%',
+		timeScheduleAdjust: {
+			prohibit: '視頻禁止拖動',
+			prohibitBackOff: '視頻禁止重複觀看',
+			prohibitForward: '視頻禁止快進',
+			prohibitLookBack: '視頻禁止播放部分內容',
+			prohibitForwardNotViewed: '視頻禁止播放未觀看的部分'
+		},
+		error: {
+			noMessage: '未知錯誤',
+			supportVideoError: '該流覽器版本太低,建議更換成其它瀏覽器',
+			videoTypeError: '該瀏覽器不支持播放該視頻,建議更換成其它瀏覽器',
+			loadingFailed: '加載失敗',
+			emptied: '視頻檔案加載過程中出現錯誤',
+			screenshot: '視頻截圖失敗',
+			ajax: 'Ajax數據請求錯誤',
+			noVideoContainer: '未找到放置視頻的容器'
+		}
+	};
+	return language;
+}))

server/src/main/resources/static/plyr/plyr.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>

server/src/main/resources/web/flv.ftl

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <title>多媒体文件预览</title>
-    <#include "*/commonHeader.ftl">
-    <script src="js/flv.min.js" type="text/javascript"></script>
-</head>
-<style>
-    body {
-        background-color: #404040;
-    }
-    .m {
-        width: 1024px;
-        margin: 0 auto;
-    }
-</style>
-<body>
-<div class="m">
-    <video width="1024" id="videoElement"></video>
-</div>
-<script>
-    if (flvjs.isSupported()) {
-        var videoElement = document.getElementById('videoElement');
-        var flvPlayer = flvjs.createPlayer({
-            type: 'flv',
-            url: '${mediaUrl}'
-        });
-        flvPlayer.attachMediaElement(videoElement);
-        flvPlayer.load();
-        flvPlayer.play();
-    }
-    /*初始化水印*/
-    window.onload = function() {
-      initWaterMark();
-    }
-</script>
-</body>
-
-</html>

server/src/main/resources/web/media.ftl

@@ -1,33 +1,111 @@
 <!DOCTYPE html>
-<html lang="zh-cn">
-<head>
-    <meta charset="utf-8"/>
-    <title>多媒体文件预览</title>
-    <#include "*/commonHeader.ftl">
-    <link rel="stylesheet" href="plyr/plyr.css"/>
-    <script type="text/javascript" src="plyr/plyr.js"></script>
-    <style>
-        body {
-            background-color: #404040;
-        }
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>${file.name}播放器</title>
+		<link type="text/css" rel="stylesheet" href="ckplayer/css/ckplayer.css" />
+		<#if "${file.suffix?lower_case}" == "m3u8" >
+		<script type="text/javascript" src="ckplayer/hls.js/hls.min.js"></script>
+	 <#elseif "${file.suffix?lower_case}" == "flv">
+		<script type="text/javascript" src="ckplayer/flv.js/flv.min.js"></script>
+			<#elseif "${file.suffix?lower_case}" == "ts">
+			<script type="text/javascript" src="ckplayer/mpegts.js/mpegts.js"></script>
+            <#elseif "${file.suffix?lower_case}" == "mpd">
+			<script type="text/javascript" src="ckplayer/js/dash.all.min.js"></script>
+		</#if>
+	<script type="text/javascript" src="ckplayer/js/ckplayer.min.js" charset="UTF-8"></script>
+		<#include "*/commonHeader.ftl">
+		<style>
+			.adpause{
+				width: 90%;
+				height: 90%;
+				max-width: 580px;
+				max-height: 360px;
+				color: #FFF;
+				position: absolute;
+				background: #07141E;
+				top:0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				margin: auto;
+				font-size: 30px;
+				line-height: 38px;
+				box-sizing:border-box;
+				-moz-box-sizing:border-box; /* Firefox */
+				-webkit-box-sizing:border-box; /* Safari */	
+				padding: 50px;
+				display: none;
+			}
+     .video{
+		width: 100%; 
+		height: 600px;
+		max-width: 900px;  
+		margin: auto;
+         position: absolute;
+        top: 0;
+       left: 0;
+       bottom: 0;
+       right: 0;
+     background-color: green;
+			}
+		</style>
+	</head>
+	<body>
+	<div class="video">播放容器</div>
+				<script>
+                <#if "${file.suffix?lower_case}" == "mpd" >
+                function dashPlayer(video,fileUrl){
+				video.attr('data-dashjs-player',' ');
+				video.attr('src',fileUrl);
+			} 
+            </#if>
+	var videoObject = {
+				container: '.video', //视频容器
+				//autoplay:true,//自动播放
+               // live:true,//指定为直播
+                crossOrigin:'Anonymous',//发送跨域信息，示例：Anonymous
+			    plug:<#if "${file.suffix?lower_case}" == "m3u8" >'hls.js'<#elseif "${file.suffix?lower_case}" == "ts" >'mpegts.js'<#elseif "${file.suffix?lower_case}" == "flv" >'flv.js'<#elseif "${file.suffix?lower_case}" == "mpd" >dashPlayer<#else>''</#if>,//设置使用插件
+                loop: false,//是否需要循环播放
+                rightBar:true,
+                screenshot:true,//截图功能是否开启
+                webFull:true,//是否启用页面全屏按钮，默认不启用
+				//poster:'ckplayer/poster.png',//封面图片
+				menu:[
+			{
+				title:'kkFileView',
+				link:'https://www.kkview.cn',
+				underline:true
+			},
+			{
+				title:'播放/暂停',
+				click:'player.playOrPause',
+			},
+			{
+				title:'关于视频',
+				click:'aboutShow'
+			}
+		],
+         	information:{
+			'已加载：':'{loadTime}秒',
+			'总时长：':'{duration}秒',
+			'视频尺寸：':'{videoWidth}x{videoHeight}',
+			'音量：':'{volume}%',
+			'FPS：':'{fps}',
+			'音频解码：':'{audioDecodedByteCount} Byte',
+			'视频解码：':'{videoDecodedByteCount} Byte',
+		},
+		video:'${mediaUrl}'//视频地址
+			};
+			var player=new ckplayer(videoObject)//调用播放器并赋值给变量player
+			  		 /*初始化水印*/
+ if (!!window.ActiveXObject || "ActiveXObject" in window)
+{
+}else{
+ initWaterMark();
+}
+		</script>
+			
 
-        .m {
-            width: 1024px;
-            margin: 0 auto;
-        }
-    </style>
-</head>
-<body>
-<div class="m">
-    <video>
-        <source src="${mediaUrl}"/>
-    </video>
-</div>
-<script>
-    plyr.setup();
-    window.onload = function () {
-        initWaterMark();
-    }
-</script>
-</body>
+	</body>
 </html>