|
|
|
@ -45,6 +45,11 @@ |
|
|
|
|
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/third-party/zeroclipboard/ZeroClipboard.js"></script> |
|
|
|
|
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.config.js"></script> |
|
|
|
|
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.all.min.js"></script> |
|
|
|
|
<script src="{__ADMIN_PATH}plug/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js"></script> |
|
|
|
|
<script src="{__ADMIN_PATH}plug/aliyun-upload-sdk/lib/es6-promise.min.js"></script> |
|
|
|
|
<script src="{__ADMIN_PATH}plug/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min.js"></script> |
|
|
|
|
<script src="//g.alicdn.com/de/prismplayer/2.12.0/aliplayer-min.js"></script> |
|
|
|
|
<script src="//g.alicdn.com/de/prismplayer/2.12.0/hls/aliplayer-hls-min.js"></script> |
|
|
|
|
{/block} |
|
|
|
|
{block name="content"} |
|
|
|
|
<div class="layui-fluid" style="background: #fff"> |
|
|
|
@ -91,7 +96,60 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="layui-form-item"> |
|
|
|
|
<label class="layui-form-label">视频链接:</label> |
|
|
|
|
<div class="layui-input-block"> |
|
|
|
|
<input type="text" name="title" v-model.trim="formData.video" style="width:50%;display:inline-block;margin-right: 10px;" autocomplete="off" placeholder="请输入视频链接" class="layui-input"> |
|
|
|
|
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="confirmAddVideo" v-show="is_upload_video==false">确认添加</button> |
|
|
|
|
<button v-show="is_upload_video==false" type="button" class="layui-btn layui-btn-normal layui-btn-sm ossupload" id="ossupload_video">上传视频</button> |
|
|
|
|
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-show="is_upload_video" @click="delVideo()">删除</button> |
|
|
|
|
<button v-show="video" type="button" class="layui-btn layui-btn-warm layui-btn-sm" @click="previewVideo">预览</button> |
|
|
|
|
</div> |
|
|
|
|
<div class="layui-input-block" style="width: 50%;margin-top: 20px" v-show="is_video"> |
|
|
|
|
<div class="layui-progress" style="margin-bottom: 10px"> |
|
|
|
|
<div class="layui-progress-bar layui-bg-blue" :style="'width:'+videoWidth+'%'"></div> |
|
|
|
|
</div> |
|
|
|
|
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" |
|
|
|
|
@click="cancelUpload" v-show="demand_switch==2 && is_video">取消 |
|
|
|
|
</button> |
|
|
|
|
<button type="button" class="authUpload layui-btn layui-btn-sm layui-btn-danger" v-show="demand_switch==1 && is_video">开始上传 |
|
|
|
|
</button> |
|
|
|
|
<button type="button" class="pauseUpload layui-btn layui-btn-sm layui-btn-danger" |
|
|
|
|
v-show="demand_switch==1 && is_video">暂停 |
|
|
|
|
</button> |
|
|
|
|
<button type="button" class="resumeUpload layui-btn layui-btn-sm layui-btn-danger" v-show="is_suspend" |
|
|
|
|
>恢复上传 |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
<div class="layui-form-mid layui-word-aux" style="margin-left: 0;">输入链接将视为添加视频直接添加,请确保视频链接的正确性</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="layui-form-item"> |
|
|
|
|
<label class="layui-form-label">音频链接:</label> |
|
|
|
|
<div class="layui-input-block"> |
|
|
|
|
<input type="text" name="title" v-model.trim="formData.audio" style="width:50%;display:inline-block;margin-right: 10px;" autocomplete="off" placeholder="请输入音频链接" class="layui-input"> |
|
|
|
|
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="confirmAddAudio" v-show="is_upload_audio==false">确认添加</button> |
|
|
|
|
<button v-show="is_upload_audio==false" type="button" class="layui-btn layui-btn-normal layui-btn-sm ossupload" id="ossupload_audio">上传音频</button> |
|
|
|
|
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-show="is_upload_audio" @click="delAudio()">删除</button> |
|
|
|
|
<button v-show="audio" type="button" class="layui-btn layui-btn-warm layui-btn-sm" @click="previewAudio">预览</button> |
|
|
|
|
</div> |
|
|
|
|
<div class="layui-input-block" style="width: 50%;margin-top: 20px" v-show="is_audio"> |
|
|
|
|
<div class="layui-progress" style="margin-bottom: 10px"> |
|
|
|
|
<div class="layui-progress-bar layui-bg-blue" :style="'width:'+audioWidth+'%'"></div> |
|
|
|
|
</div> |
|
|
|
|
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" |
|
|
|
|
@click="cancelUpload" v-show="demand_switch==2 && is_audio">取消 |
|
|
|
|
</button> |
|
|
|
|
<button type="button" class="authUpload layui-btn layui-btn-sm layui-btn-danger" v-show="demand_switch==1 && is_audio">开始上传 |
|
|
|
|
</button> |
|
|
|
|
<button type="button" class="pauseUpload layui-btn layui-btn-sm layui-btn-danger" |
|
|
|
|
v-show="demand_switch==1 && is_audio">暂停 |
|
|
|
|
</button> |
|
|
|
|
<button type="button" class="resumeUpload layui-btn layui-btn-sm layui-btn-danger" v-show="is_suspend" |
|
|
|
|
>恢复上传 |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
<div class="layui-form-mid layui-word-aux" style="margin-left: 0;">输入链接将视为添加音频直接添加,请确保音频链接的正确性</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="layui-form-item"> |
|
|
|
|
<label class="layui-form-label">排序:</label> |
|
|
|
|
<div class="layui-input-inline"> |
|
|
|
@ -116,6 +174,8 @@ |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
</div> |
|
|
|
|
<div class="prism-player" id="J_prismPlayer_video"></div> |
|
|
|
|
<div class="prism-player" id="J_prismPlayer_audio"></div> |
|
|
|
|
</div> |
|
|
|
|
<script type="text/javascript" src="{__ADMIN_PATH}js/layuiList.js"></script> |
|
|
|
|
{/block} |
|
|
|
@ -149,6 +209,8 @@ |
|
|
|
|
name:article.name || '', |
|
|
|
|
en_name:article.en_name || '', |
|
|
|
|
us_name:article.us_name || '', |
|
|
|
|
video:article.video || '', |
|
|
|
|
audio:article.audio || '', |
|
|
|
|
recite_subject_id:article.recite_subject_id || 0, |
|
|
|
|
pid:article.pid || 0, |
|
|
|
|
sort:article.sort || 0, |
|
|
|
@ -157,27 +219,199 @@ |
|
|
|
|
all:all, |
|
|
|
|
all1:all1, |
|
|
|
|
but_title:'上传视频', |
|
|
|
|
link:'', |
|
|
|
|
video:'', |
|
|
|
|
audio:'', |
|
|
|
|
label:'', |
|
|
|
|
mask:false, |
|
|
|
|
ue:null, |
|
|
|
|
uploader:null, |
|
|
|
|
is_video:false, |
|
|
|
|
is_audio:false, |
|
|
|
|
is_upload_video:false, |
|
|
|
|
is_upload_audio:false, |
|
|
|
|
is_suspend:false, |
|
|
|
|
demand_switch:2, |
|
|
|
|
videoWidth:0, |
|
|
|
|
audioWidth:0, |
|
|
|
|
}, |
|
|
|
|
methods:{ |
|
|
|
|
uploadVideo:function(){ |
|
|
|
|
var link = this.link.trim(); |
|
|
|
|
if (link) { |
|
|
|
|
if (link.indexOf('http') || link.indexOf('mp4') !== link.length - 3) { |
|
|
|
|
delVideo:function(){ |
|
|
|
|
var that=this; |
|
|
|
|
if(that.demand_switch=='1' && that.formData.videoId){ |
|
|
|
|
layList.basePost(layList.U({a: 'video_upload_address_voucher'}),{ |
|
|
|
|
FileName:'',type:4,image:'',videoId:that.formData.videoId |
|
|
|
|
}, function (res) { |
|
|
|
|
var url=res.msg; |
|
|
|
|
$.ajax({ |
|
|
|
|
url:url, |
|
|
|
|
data:{}, |
|
|
|
|
type:"GET", |
|
|
|
|
dataType:'json', |
|
|
|
|
success:function (data) { |
|
|
|
|
if(data.RequestId){ |
|
|
|
|
that.link=''; |
|
|
|
|
that.formData.content=''; |
|
|
|
|
that.formData.videoId=''; |
|
|
|
|
that.formData.file_type=''; |
|
|
|
|
that.formData.file_name=''; |
|
|
|
|
that.editor1.setContent(''); |
|
|
|
|
$("input[type='file']").val(''); |
|
|
|
|
that.is_upload = false; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
error:function (err) { |
|
|
|
|
return layList.msg(err.responseJSON.Message); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}else{ |
|
|
|
|
that.formData.videoId=''; |
|
|
|
|
that.link=''; |
|
|
|
|
that.editor1.setContent(''); |
|
|
|
|
that.is_upload = false; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
playbackAddress:function (videoId) { |
|
|
|
|
var that=this; |
|
|
|
|
if(videoId=='') return false; |
|
|
|
|
layList.basePost(layList.U({a: 'video_upload_address_voucher'}), { |
|
|
|
|
FileName: '', type: 3, image: '', videoId: videoId |
|
|
|
|
}, function (res) { |
|
|
|
|
var url = res.msg; |
|
|
|
|
$.ajax({ |
|
|
|
|
url: url, |
|
|
|
|
data: {}, |
|
|
|
|
type: "GET", |
|
|
|
|
dataType: 'json', |
|
|
|
|
success: function (data) { |
|
|
|
|
that.link = data.PlayInfoList.PlayInfo[0].PlayURL; |
|
|
|
|
if (that.isPreview) { |
|
|
|
|
that.previewPlayer(); |
|
|
|
|
} else { |
|
|
|
|
that.uploadVideo(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
error: function (err) { |
|
|
|
|
that.link = ''; |
|
|
|
|
that.formData.content = ''; |
|
|
|
|
that.formData.videoId = ''; |
|
|
|
|
that.formData.file_type = ''; |
|
|
|
|
that.formData.file_name = ''; |
|
|
|
|
that.is_upload = false; |
|
|
|
|
return layList.msg(err.responseJSON.Message); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
previewPlayerVideo: function () { |
|
|
|
|
var that = this; |
|
|
|
|
new Aliplayer({ |
|
|
|
|
id: 'J_prismPlayer_video', |
|
|
|
|
source: this.video, |
|
|
|
|
height: '100%', |
|
|
|
|
cover: this.formData.image, |
|
|
|
|
autoplay: false, |
|
|
|
|
format: '' |
|
|
|
|
}, function (player) { |
|
|
|
|
that.isPreview = false; |
|
|
|
|
layList.layer.open({ |
|
|
|
|
type: 1, |
|
|
|
|
title: false, |
|
|
|
|
resize: false, |
|
|
|
|
content: $('#J_prismPlayer_video'), |
|
|
|
|
area: ['640px', '360px'], |
|
|
|
|
end: function () { |
|
|
|
|
player.dispose(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
previewPlayerAudio: function () { |
|
|
|
|
var that = this; |
|
|
|
|
new Aliplayer({ |
|
|
|
|
id: 'J_prismPlayer_audio', |
|
|
|
|
source: this.audio, |
|
|
|
|
height: '100%', |
|
|
|
|
cover: '', |
|
|
|
|
autoplay: false, |
|
|
|
|
format: 'mp3' |
|
|
|
|
}, function (player) { |
|
|
|
|
that.isPreview = false; |
|
|
|
|
layList.layer.open({ |
|
|
|
|
type: 1, |
|
|
|
|
title: false, |
|
|
|
|
resize: false, |
|
|
|
|
content: $('#J_prismPlayer_audio'), |
|
|
|
|
area: ['640px', '360px'], |
|
|
|
|
end: function () { |
|
|
|
|
player.dispose(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 预览音视频 |
|
|
|
|
previewVideo: function () { |
|
|
|
|
if (this.video.indexOf('http')) { |
|
|
|
|
layList.msg('请输入正确的视频链接'); |
|
|
|
|
} else { |
|
|
|
|
this.isPreview = true; |
|
|
|
|
if (this.formData.videoId) { |
|
|
|
|
this.playbackAddress(this.formData.videoId); |
|
|
|
|
} else { |
|
|
|
|
this.previewPlayerVideo(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 预览音视频 |
|
|
|
|
previewAudio: function () { |
|
|
|
|
if (this.audio.indexOf('http')) { |
|
|
|
|
layList.msg('请输入正确的音频链接'); |
|
|
|
|
} else { |
|
|
|
|
this.isPreview = true; |
|
|
|
|
if (this.formData.videoId) { |
|
|
|
|
this.playbackAddress(this.formData.videoId); |
|
|
|
|
} else { |
|
|
|
|
this.previewPlayerAudio(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
confirmAddVideo: function () { |
|
|
|
|
if (this.video) { |
|
|
|
|
if (/^https?:\/\/(.+\/)+.+(\.(m3u8|mp4))$/i.test(this.video)) { |
|
|
|
|
this.is_upload_video = true; |
|
|
|
|
this.uploadVideo(); |
|
|
|
|
} else { |
|
|
|
|
layui.layer.msg('请输入正确的视频链接', {icon: 5}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
confirmAddAudio: function () { |
|
|
|
|
if (this.audio) { |
|
|
|
|
if (/^https?:\/\/(.+\/)+.+(\.(mp3))$/i.test(this.audio)) { |
|
|
|
|
this.is_upload_audio = true; |
|
|
|
|
this.uploadAudio(); |
|
|
|
|
} else { |
|
|
|
|
this.setContent(this.link); |
|
|
|
|
layui.layer.msg('请输入正确的音频链接', {icon: 5}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
setContent:function(link){ |
|
|
|
|
this.ue.setContent('<div><video style="width: 100%" src="'+link+'" class="video-ue" controls="controls">\n' + |
|
|
|
|
uploadVideo:function(){ |
|
|
|
|
if(this.video.substr(0,7).toLowerCase() == "http://" || this.video.substr(0,8).toLowerCase() == "https://"){ |
|
|
|
|
this.formData.video = this.video; |
|
|
|
|
console.log(video); |
|
|
|
|
}else{ |
|
|
|
|
layList.msg('请输入正确的视频链接'); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
uploadAudio:function(){ |
|
|
|
|
if(this.audio.substr(0,7).toLowerCase() == "http://" || this.audio.substr(0,8).toLowerCase() == "https://"){ |
|
|
|
|
this.formData.audio = this.audio;; |
|
|
|
|
}else{ |
|
|
|
|
layList.msg('请输入正确的音频链接'); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
setContent:function(video){ |
|
|
|
|
this.ue.setContent('<div><video style="width: 100%" src="'+video+'" class="video-ue" controls="controls">\n' + |
|
|
|
|
'your browser does not support the video tag\n' + |
|
|
|
|
'</video></div><br>',true); |
|
|
|
|
}, |
|
|
|
@ -318,28 +552,83 @@ |
|
|
|
|
}); |
|
|
|
|
that.ue = UE.getEditor('editor'); |
|
|
|
|
that.uploader = ossUpload.upload({ |
|
|
|
|
id:'ossupload', |
|
|
|
|
id: 'ossupload_video', |
|
|
|
|
mime_types: [ |
|
|
|
|
{title: "Mp4 files", extensions: "mp4"} |
|
|
|
|
], |
|
|
|
|
FilesAddedSuccess:function(){ |
|
|
|
|
that.is_video = true; |
|
|
|
|
}, |
|
|
|
|
uploadIng:function (file) { |
|
|
|
|
uploadIng: function (file) { |
|
|
|
|
that.videoWidth = file.percent; |
|
|
|
|
// layui.element.progress('progress', file.percent + '%'); |
|
|
|
|
}, |
|
|
|
|
FilesAddedSuccess: function (files) { |
|
|
|
|
that.is_video = true; |
|
|
|
|
}, |
|
|
|
|
success:function (res) { |
|
|
|
|
success: function (res) { |
|
|
|
|
layList.msg('上传成功'); |
|
|
|
|
that.videoWidth = 0; |
|
|
|
|
that.is_video = false; |
|
|
|
|
that.setContent(res.url); |
|
|
|
|
that.video = res.url; |
|
|
|
|
that.is_upload_video = true; |
|
|
|
|
this.formData.video = that.video; |
|
|
|
|
// this.formData.link = this.link; |
|
|
|
|
// that.uploadVideo(); |
|
|
|
|
}, |
|
|
|
|
fail:function (err) { |
|
|
|
|
that.videoWidth = 0; |
|
|
|
|
fail: function (err) { |
|
|
|
|
that.is_video = false; |
|
|
|
|
that.is_upload_video = false; |
|
|
|
|
layList.msg(err); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
that.uploader = ossUpload.upload({ |
|
|
|
|
id: 'ossupload_audio', |
|
|
|
|
mime_types: [ |
|
|
|
|
{title: "Mp4 files", extensions: "mp3"} |
|
|
|
|
], |
|
|
|
|
uploadIng: function (file) { |
|
|
|
|
that.audioWidth = file.percent; |
|
|
|
|
// layui.element.progress('progress', file.percent + '%'); |
|
|
|
|
}, |
|
|
|
|
FilesAddedSuccess: function (files) { |
|
|
|
|
that.is_audio = true; |
|
|
|
|
}, |
|
|
|
|
success: function (res) { |
|
|
|
|
layList.msg('上传成功'); |
|
|
|
|
that.is_audio = false; |
|
|
|
|
that.audio = res.url; |
|
|
|
|
that.is_upload_audio = true; |
|
|
|
|
this.formData.audio = that.audio; |
|
|
|
|
// this.formData.link = this.link; |
|
|
|
|
// that.uploadVideo(); |
|
|
|
|
}, |
|
|
|
|
fail: function (err) { |
|
|
|
|
that.is_audio = false; |
|
|
|
|
that.is_upload_audio = false; |
|
|
|
|
layList.msg(err); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// that.uploader = ossUpload.upload({ |
|
|
|
|
// id:'ossupload', |
|
|
|
|
// mime_types: [ |
|
|
|
|
// {title: "Mp4 files", extensions: "mp4"} |
|
|
|
|
// ], |
|
|
|
|
// FilesAddedSuccess:function(){ |
|
|
|
|
// that.is_video = true; |
|
|
|
|
// }, |
|
|
|
|
// uploadIng:function (file) { |
|
|
|
|
// that.videoWidth = file.percent; |
|
|
|
|
// }, |
|
|
|
|
// success:function (res) { |
|
|
|
|
// layList.msg('上传成功'); |
|
|
|
|
// that.videoWidth = 0; |
|
|
|
|
// that.is_video = false; |
|
|
|
|
// that.setContent(res.url); |
|
|
|
|
// }, |
|
|
|
|
// fail:function (err) { |
|
|
|
|
// that.videoWidth = 0; |
|
|
|
|
// that.is_video = false; |
|
|
|
|
// layList.msg(err); |
|
|
|
|
// } |
|
|
|
|
// }) |
|
|
|
|
}.bind(this)); |
|
|
|
|
window.changeIMG = that.changeIMG; |
|
|
|
|
//选择图片插入到编辑器中 |
|
|
|
|