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

mipcms官方发布了文章《MIPCMS如何引入外部视频？》看完了官方教程以后，他讲的原理，方法，步骤已经告诉给我们了，但是我发现了一个非常严重的问题，那就是如果按照官方的教程

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

猜你喜欢