ppypp伦理天堂,91手机在线视频,免费在线观看黄色毛片,夜夜穞天天穞狠狠穞AV美女按摩

迅睿CMS實現點擊視頻在彈窗中瀏覽播放的方法非常簡單，新手小白都可以實現。方法一、CMS內置方法實現

第一步：

模板中引用系統JS函數類文件

<script src="{THEME_PATH}assets/js/cms.js" type="text/javascript"></script>

第二步：開始調用

調用方法：

<a href="javascript:dr_preview_video('視頻地址')">
點擊彈窗查看視頻
</a>

示例1：列表循環中實現

{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'])}')">
  點擊彈出層播放視頻
  </a>
</li>
{/module}

就這么簡單，已經實現了

效果如下圖所示：

但它有個缺點：

彈窗大小是固定的，點擊空白區域無法關閉，而且會顯示視頻URL地址，因為這個內置方法主要用于后臺的視頻查看。

那么就有了完美的方法二

方法二：自定義方法

優點，可自定義寬度與高度，自適應移動端，點擊視頻外陰影區域可關閉。

1、在模板中添加這段JS：

看不懂沒關系，直接復制使用即可：

<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、調用方法：

<a href="javascript:dr_popup_video('視頻地址',寬度,高度)">
點擊彈窗查看圖片
</a>

示例1：

以單文件字段上傳視頻為例：

<a title="{$t.title}" href="javascript:dr_popup_video('{dr_get_file($t['videofile'])}',800,500)">
點擊彈出層查看視頻
</a>

完整示例2：

列表循環中：

{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'])}')">
      方法一：點擊彈出層播放視頻
     </a>
     <a title="{$t.title}" href="javascript:dr_popup_video('{dr_get_file($t['videofile'])}',800,500)">
      方法二：點擊彈出層播放視頻
     </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>

打賞作者