迅睿CMS實(shí)現(xiàn)點(diǎn)擊視頻在彈窗中瀏覽播放的方法非常簡單，新手小白都可以實(shí)現(xiàn)。方法一、CMS內(nèi)置方法實(shí)現(xiàn)
第一步：
模板中引用系統(tǒng)JS函數(shù)類文件
<script src="{THEME_PATH}assets/js/cms.js" type="text/javascript"></script>
第二步：開始調(diào)用
調(diào)用方法：
<a href="javascript:dr_preview_video('視頻地址')">
點(diǎn)擊彈窗查看視頻
</a>示例1：列表循環(huán)中實(shí)現(xiàn)
{module catid=$catid order=updatetime page=1}
<li class="col-3">
<a title="{$t.title}" href="javascript:dr_preview_video('{dr_get_file($t['videofile'])}')">
點(diǎn)擊彈出層播放視頻
</a>
</li>
{/module}就這么簡單，已經(jīng)實(shí)現(xiàn)了
效果如下圖所示：
但它有個缺點(diǎn)：
彈窗大小是固定的，點(diǎn)擊空白區(qū)域無法關(guān)閉，而且會顯示視頻URL地址，因?yàn)檫@個內(nèi)置方法主要用于后臺的視頻查看。
那么就有了完美的方法二
方法二：自定義方法
優(yōu)點(diǎn)，可自定義寬度與高度，自適應(yīng)移動端，點(diǎn)擊視頻外陰影區(qū)域可關(guān)閉。
1、在模板中添加這段JS：
看不懂沒關(guān)系，直接復(fù)制使用即可：
<script>
// 彈出層顯示視頻
function dr_popup_video(file, w, h) {
var width = w+'px';
var height = h+'px';
var vw = w-40;
if (is_mobile_cms == 1) {
width = '90%';
height = 'auto';
var vw = '100%';
}
layer.alert('<div style="text-align: center"> <video class="video-js vjs-default-skin" controls="" preload="auto" width='+vw+'><source src="'+file+'" type="video/mp4"/></video>\n</div>', {
//scrollbar: false,
shadeClose: true,
title: '',
area: [width, height],
btn: []
});
}
</script>2、調(diào)用方法：
<a href="javascript:dr_popup_video('視頻地址',寬度,高度)">
點(diǎn)擊彈窗查看圖片
</a>示例1：
以單文件字段上傳視頻為例：
<a title="{$t.title}" href="javascript:dr_popup_video('{dr_get_file($t['videofile'])}',800,500)">
點(diǎn)擊彈出層查看視頻
</a>完整示例2：
列表循環(huán)中：
{module catid=$catid order=updatetime page=1}
<li class="col-md-4 search-item clearfix">
<div class=" text-center">
<a title="{$t.title}" href="javascript:dr_popup_video('{dr_get_file($t['videofile'])}',800,500)">
<img src="{dr_thumb($t.thumb, 100, 90)}" width="100" height="90" style="margin-top: 15px;">
</a>
<h4 class="search-title">
<a title="{$t.title}" href="{$t.url}">{$t.title}</a>
</h4>
<p class="search-desc">{dr_strcut($t.description, 80)}</p>
</div>
</li>
{/module}
<script>
// 彈出層顯示視頻
function dr_popup_video(file, w, h) {
var width = w+'px';
var height = h+'px';
var vw = w-40;
if (is_mobile_cms == 1) {
width = '90%';
height = 'auto';
var vw = '100%';
}
layer.alert('<div style="text-align: center"> <video class="video-js vjs-default-skin" controls="" preload="auto" width='+vw+'><source src="'+file+'" type="video/mp4"/></video>\n</div>', {
//scrollbar: false,
shadeClose: true,
title: '',
area: [width, height],
btn: []
});
}
</script>效果如下圖所示：
歡樂時刻，二種一起使用對比下效果
{module catid=$catid order=updatetime page=1}
<li class="col-md-4 search-item clearfix">
<div class=" text-center">
<a title="{$t.title}" href="javascript:dr_preview_video('{dr_get_file($t['videofile'])}')">
方法一：點(diǎn)擊彈出層播放視頻
</a>
<a title="{$t.title}" href="javascript:dr_popup_video('{dr_get_file($t['videofile'])}',800,500)">
方法二：點(diǎn)擊彈出層播放視頻
</a>
<h4 class="search-title">
<a title="{$t.title}" href="{$t.url}">{$t.title}</a>
</h4>
<p class="search-desc">{dr_strcut($t.description, 80)}</p>
</div>
</li>
{/module}
<script>
// 彈出層顯示視頻
function dr_popup_video(file, w, h) {
var width = w+'px';
var height = h+'px';
var vw = w-40;
if (is_mobile_cms == 1) {
width = '90%';
height = 'auto';
var vw = '100%';
}
layer.alert('<div style="text-align: center"> <video class="video-js vjs-default-skin" controls="" preload="auto" width='+vw+'><source src="'+file+'" type="video/mp4"/></video>\n</div>', {
//scrollbar: false,
shadeClose: true,
title: '',
area: [width, height],
btn: []
});
}
</script>