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

pull/223/head
gaoxiongzaq 1 year ago
parent d49b444462
commit 6da291e6e3

@ -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,3gp,m4a}
#,avi,mov,wmv,3gp,rm
#线线,
media.convert.disable = ${KK_MEDIA_CONVERT_DISABLE:false}

@ -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);
}

@ -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";

@ -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;
}
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -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;
}))

@ -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;
}))

@ -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;
}))

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -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>

Before

Width:  |  Height:  |  Size: 3.7 KiB

@ -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>

@ -1,33 +1,111 @@
<!DOCTYPE html>
<html lang="zh-cn">
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<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">
<link rel="stylesheet" href="plyr/plyr.css"/>
<script type="text/javascript" src="plyr/plyr.js"></script>
<style>
body {
background-color: #404040;
.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;
}
.m {
width: 1024px;
margin: 0 auto;
.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="m">
<video>
<source src="${mediaUrl}"/>
</video>
</div>
<div class="video"></div>
<script>
plyr.setup();
window.onload = function () {
<#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>
</body>
</html>

Loading…
Cancel
Save