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

  • 时间:
  • 浏览:394次
  • 来源:网站服务商官网 网址:https://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即可。

本文地址:https://www.wzfws.com/shipin.html


网站服务商经典语录
欢迎关注我的微信和微信公众号

猜你喜欢

视频教程:在自己的电脑上安装phpstudy软件,创建本地网站环境,搭建各种网站

我们做网站的人经常要安装各种网站程序,看看这个网站程序适合不适合自己的要求,这个网站源码到底是否可用等,本地安装测试,要比上传到虚拟主机或者服务器上面修改要方便得多。php中文

2019-07-24  分类:基础知识  浏览:215次


免费在线智能AI文章伪原创工具源码

免费在线智能AI文章伪原创工具源码出售本工具源码不写入数据库,上传到任意支持php的网站空间即可,部分空间需要开启相关的参数,才能正确使用。伪原创工具的工作原理是:使用谷歌翻译

2019-07-19  分类:小工具  浏览:285次


网站服务商diy模板更新

更新的地方有:1、6月19日增加了两个栏目单页面模板。2、6月22日修改了文章详情页的字体大小和间距。3、6月23日调整了上一篇、下一篇和猜你喜欢的位置。4、6月24日,在上一篇、下一篇的上方,增加一个回到目录的提示与地址。

2019-07-01  分类:本站公告  浏览:268次


杨泽业:mipjz网站的MIP数据提交到神马搜索的实现方法

今天早上研究了一下,怎么把mipjz程序的文章链接和标签链接推送到神马搜索里面。我们的程序是mip的,神马搜索页也支持MIP数据提交。神马搜索里面只是提供了api,没有提交的入

2019-07-01  分类:mipcms  浏览:352次


工信部批复设立中国自己的域名根服务器

6月26日,工信部发布通告《工业和信息化部关于同意中国互联网络信息中心设立域名根服务器(F、I、K、L根镜像服务器)及域名根服务器运行机构的批复》及《工业和信息化部关于同意互联

2019-06-28  分类:行业资讯  浏览:256次


给你的网站添加百度商桥的在线沟通的功能

今天我访问我的一个买了我的mip网站模板的客户的网站,发现了他的网站添加了百度商桥的在线沟通的功能。我认为添加了商桥的代码,肯定就不能通过百度mip的验证了。但是,我错了。我经

2019-06-21  分类:基础知识  浏览:391次


景安虚拟主机免费一键开启https安全访问的方法

今天在杨泽业网站建设交流群(群号:187388018)群友普密斯精密仪器问我:“群主,你网站上有把mipcms加上https的教程吗?”我回答说:“没有,你遇到什么问题了,直接

2019-06-20  分类:基础知识  浏览:323次


网站服务商diy模板618更新:全站删除文章缩略图,让网站访问更加快速

网站服务商讯:网站服务商站长杨泽业基于mipjz官方模版制作的diy模板,在2019年6月18日进行更新:全站删除文章缩略图,让网站访问更加快速。本次删除的缩略图的地方有首页列

2019-06-17  分类:本站公告  浏览:255次


给网站添加网站地图

网站地图,又称站点地图,它就是一个引导页面,让用户或者搜索引擎更加方便的找到自己需要的内容,搜索引擎蜘蛛非常喜欢网站地图。网站地图分为html地图和xml地图。html地图给用

2019-06-10  分类:基础知识  浏览:302次


网站地图

网站地图,又称站点地图,它就是一个引导页面,让用户或者搜索引擎更加方便的找到自己需要的内容,搜索引擎蜘蛛非常喜欢网站地图。网站地图分为html地图和xml地图。html地图给用

2019-06-10  分类:建站百科  浏览:194次