杨泽业:给你的 mipcms网站添加外部视频详细教程

  • 时间:
  • 浏览:258
  • 来源:网站服务商官网

mipcms官方发布了文章《MIPCMS如何引入外部视频?》看完了官方教程以后,他讲的原理,方法,步骤已经告诉给我们了,但是我发现了一个非常严重的问题,那就是如果按照官方的教程操作下来,每一个文章的结尾,如果是发布了视频,视频占位了还算正常,如果是没有视频的文章结尾有一段大的空余,这样就太难看了。这个方法绝对不可用。


于是我就削尖了脑袋,测试了无数的代码,终于想出了使用了两个视频解决方案,完美的解决了文章中添加外部视频的方法.


第一种视频解决方案:添加静态视频地址。

静态视频地址即固定地址,结尾是.mp4这样的地址的视频,他网络上面是以绝对地址出现的,比如

https://www.yangzeye.cn/mp4/20180304.mp4

这个是李玫瑾教授关于性格训练和教育的演讲视频。


在视频点击播放之前,我做一个视频贴片广告,品牌广告语是:网站服务商提醒您:请点击播放视频

操作方法:

在后台--文章--自定义字段--添加字段

字段名称:视频地址

字段别名:spdz

字段类型:文本字符串

这样添加以后,就得到了一个调用代码,{$itemInfo['diy_spdz']}


把下面这段代码,加入到文章详情页模板template\default\article\articleDetail.html我们放在正文内容后面,即代码{$itemInfo['mipContent']}的后面,添加以下代码:

<div>{if condition='$itemInfo["diy_spdz"]'}

<mip-video poster="http://img.mipmb.com/640x360/bgColor-5cadff__color-ffffff__text-网站服务商提醒您:点击播放视频" controls

layout="responsive" width="640" height="360"

src="{$itemInfo['diy_spdz']}">

</mip-video>

{/if}</div>


上面的这个代码,是加入了视频判断的,如果有视频内容添加,理论上文章结尾就会占用视频640*360空间位置,用于播放视频,实际上宽度是自适应的了宽度是730的,高度410的。如果没有视频添加 的话,不会占用位置的。


上面代码中poster="“”就是添加一张背景图片,也就是我说的,视频贴片广告,里面的640x360自己可以随便设置宽度x高度,图片背景颜色bgcolor-后面接具体的颜色值,color-后面接具体的文字颜色值,text-后面接具体的显示的文字。


代码部分修改就完成了,我们在发布文章的时候,就会多出一个视频地址的选项框了,我们就把视频地址(如:https://www.yangzeye.cn/mp4/20180304.mp4)复制进去即可,发布文章以后,就会自动在该文章结尾出现这个视频。


这样就大功完成了,看起来也非常的完美了,实际上,他不支持爱奇艺艺,腾讯视频等这样不是绝对地址的视频,如:《管道的故事》,我希望我们的网站就是我们的一条管道,管道越多越大,我们的收入就越高。网站月持久我们的收入就越持久。好了,讲道理的话就不多说了,直接上视频地址:

https://v.qq.com/iframe/player.html?vid=m0327hrw0yj 

这样的是我们需求最多的视频来源地址,因为我们都是上传到 腾讯视频,爱奇艺,优酷等这样的视频网站。经过自己的研究总结,问题还是得到了解决。于是出现了下面视频解决方案。


二、第二种视频解决方案,插入优酷,爱奇艺,腾讯视频等动态视频地址。

操作方法:

在后台--文章--自定义字段--添加字段

字段名称:视频代码

字段别名:spdm

字段类型:文本字符串

这样添加以后,就得到了一个调用代码,{$itemInfo['diy_spdm']}


这个代码,什么也不需要操作,直接把{$itemInfo['diy_spdm']}张贴到上面的视频代码的下一行即可。当然也可以加一个div即:<div>{$itemInfo['diy_spdm']}</div>


模板代码部分搞定了,下面就需要添加视频代码了,我把视频代码,复制在下面,你们按照下面代码添加即可。

<mip-iframe frameborder="0" width="640" height="360" src="爱奇艺、优酷视频地址"  allowfullscreen></mip-iframe>


如爱奇艺的管道的故事代码:

<mip-iframe frameborder="0" width="640" height="360" src="https://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=0b530fb738dbb4124dc628a353107f8e&tvId=5130645209&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368"   allowfullscreen></mip-iframe>


如优酷的管道的故事代码:

<mip-iframe frameborder="0" width="640" height="360"  src="https://player.youku.com/embed/XMzQxMjI5ODUxMg=="  allowfullscreen></mip-iframe>


上面就是视频的调用代码直接添加爱奇艺和优酷地址的调用代码,如果是腾讯视频的话,上面 的调用代码在播放地址后面添加&auto=0才不会让他自动播放,调用代码如下:

<mip-iframe frameborder="0" width="640" height="360"  src="腾讯视频地址&auto=0"  allowfullscreen></mip-iframe>


腾讯视频管道的故事视频代码

<mip-iframe frameborder="0" width="640" height="360"  src="https://v.qq.com/iframe/player.html?vid=m0327hrw0yj&auto=0"  allowfullscreen></mip-iframe>

文章发布的情况下如下:


温馨提醒:所有调用的地址都是https开头的,如果你在爱奇艺,优酷,腾讯视频查看到的视频地址是http的,自动改成https即可。

猜你喜欢

最新mjpjz5.0模板全新为你服务,功能更强体验更佳

mipcms源码升级为全新的mipjz,新的源码,有着新的改变,让网站功能更佳强大,用户体验也更加友好。网站服务商杨泽业一直致力于mipjz的模板的改进与优化,同步推出了使用于

2019-02-18  分类:本站公告  浏览:12次

全新mipcm5.0的模板上线,现在预订只要30元

由于团长在2019年元旦放出了mipcms5.0的最新源码,MIPCMSv5.0是基于MIPCMSv3.6基础上重构版本,新增标签分类模板功能,新增标签推送功能,新增搜索功能等

2019-01-09  分类:本站公告  浏览:127次

永久虚拟主机即将下架,目前特价预定中,一旦错过就再也没有了!

永久虚拟主机即将下架,目前特价预定中,一旦错过就再也没有了!由网站服务商杨泽业代理的永久美国虚拟主机和永久的香港虚拟主机12月31日下架,元旦以后再也买不到了。因此,未来想做多

2018-12-30  分类:本站公告  浏览:156次

杨泽业:给你的mipcms网站添加自定义缩略图的功能

网站服务商杨泽业:给你的mipcms网站添加自定义缩略图我们在最新版本的mipcms3.6中的,默认的文章里面,在添加文章的时候,是没有自定义缩略图的功能,而在我们实际发布文章

2018-12-30  分类:mipcms  浏览:149次

杨泽业:修改mipcms网站后台地址的方法

在mipcms的网站系统里面,默认的网站后台地址是/admin或者/?s=/admin因为每个人都知道这个网站后台地址,所以就容易引起别人的暴力破解,我们修改了网站后台的登陆地

2018-12-25  分类:mipcms  浏览:240次