文章目录[隐藏]

前提说明

RiPro-V2主题自带的DPlayer播放器,播放器本身还是很强大的,但是默认只有点播模式,当我们在文章视频里添加的是直播源时,前端播放会跟点播一样,控制条还是能继续操作,且不会显示直播,为了更好的兼容我们增加了直播模式,在我们发布文章时,可选择是否为直播,本功能不知道有没有人反馈到油条,我就先做了,效果如下:

RiPro-V2视频播放器增强,判断是否为直播插图

注意:本教程基于RiPro-V2做的,rizhuti-v2主题文件路径结构都是一样的,也可参考如下教程,但不要照搬!

优化教程

1、打开“ripro-v2/inc/options/metabox-options.php”文件,搜索如下代码:

隐藏内容

此处内容需要权限查看

  • 普通60积分
  • 会员6积分1折

5、还是在“hero-video.php”文件,搜索:“<!-- JS脚本 -->”,也就是下面的代码:

<script type="text/javascript">
.....代码省略.....
</script>
RiPro-V2视频播放器增强,判断是否为直播插图

6、将上述代码替换为如下代码:

<script type="text/javascript">
jQuery(function(){'use strict';var js_video_url='<?php echo $js_video_url; ?>';var js_video_pic='<?php echo $js_video_pic; ?>';var js_video_content='<?php echo $_content; ?>';const dp=new DPlayer({container:document.getElementById("rizhuti-video"),theme:"#fe4066",live:<?php echo $video_live;?>,screenshot:!1,video:{url:js_video_url,type:"auto",pic:js_video_pic}});var video_vh="inherit";if($(".dplayer-video").bind("loadedmetadata",function(){var e=this.videoWidth||0,i=this.videoHeight||0,a=$("#rizhuti-video").width();i>e&&(video_vh=e/i*a,$(".dplayer-video").css("max-height",video_vh))}),""==js_video_url){var mask=$(".dplayer-mask");mask.show(),mask.hasClass("content-do-video")||(mask.append(js_video_content),$(".dplayer-video-wrap").addClass("video-filter"))}else{var notice=$(".dplayer-notice");notice.hasClass("dplayer-notice")&&(notice.css("opacity","0.8"),notice.append('<i class="fa fa-unlock-alt"></i> 您已获得播放权限'),setTimeout(function(){notice.css("opacity","0")},2e3)),dp.on("fullscreen",function(){$(".dplayer-video").css("max-height","unset")}),dp.on("fullscreen_cancel",function(){$(".dplayer-video").css("max-height",video_vh)})}var vpage=$("#rizhuti-video-page .switch-video");vpage.on("click",function(){var e=$(this);vpage.removeClass("active"),e.addClass("active"),dp.switchVideo({url:e.data("url"),type:"auto",pic:e.data("pic")})})});
</script>

7、然后到后台发布直播源文章时选择直播即可,这样前台就是直播模式了!

 

发表回复

后才能评论