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

  • 时间:
  • 浏览:210
  • 来源:网站服务商官网
  • 网址:www.wzfws.com

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即可。

管道的故事

猜你喜欢

杨泽业:泰木谷时间银行领投资的创业项目介绍

请新朋友一定要认真看看泰木谷,不懂的加杨泽业QQ/微信:350379853及时了解。免费注册以后拉你进群。一、泰木谷时间银行想干什么?泰木谷时间银行就是用碎片化的时间,做相关的

2018-12-14 @本站公告  

杨泽业:推广支付宝红包码,让你和你的用户一起赚钱

目前,支付宝在做推广支付宝的红包码和收钱码的活动,每天可以扫码一次,红包最高99元,你领了红包以后可以立刻在我这里支付,让红包抵扣掉。红包推广者和红包使用者都能获得差不多大小的

2018-12-04 @本站公告  红包花呗支付宝

杨泽业:给你的mipcms网站添加一个首页滚动公告栏

网站服务商杨泽业:给你的mipcms网站添加一个首页滚动公告栏如果你有什么公告或者广告的话,我觉得在首页左侧的位置添加一个滚动的公告栏(广告栏),这样的话,我感觉是比较好的。说

2018-11-20 @mipcms  滚动公告

杨泽业旗下的所有网站,全部更换本站的diy2.0模板,网站有销售业务的开通在线商城

由杨泽业根据默认模板开发的《自定义颜色列表试自适应mipcms独立diy模板优化版2.0》,我决定:我要吧我旗下的所有的mipcms网站全部升级到diy2.0来,如果有产品可以

2018-11-11 @本站公告  

杨泽业:如何隐藏CNZZ站长统计的统计代码及“站长统计”字样

杨泽业:如何隐藏CNZZ站长统计的统计代码及“站长统计”字样上次我分享了《如何解决英文网站使用cnzz站长统计,但是前台又能不显示站长统计的问题?》是使用mip统计的方法实现的

2018-11-01 @建站问答  站长统计cnzz