一、添加以.mp4结尾的这样的视频地址的话,使用百度官方推荐的mip-video标签调用: - <div class="dnsp" align="center"><mip-video poster="" controls layout="responsive" width="720" height="460" src="https://www.yangzeye.net/mp4/xsjzspjc.mp4"></mip-video><p>电脑用户请全屏观看:杨泽业新手建站视频教程:怎么在虚拟主机上面搭建一个独立网站</p></div>
- <div class="sjsp" align="center"><mip-video poster="" controls layout="responsive" width="300" height="240" src="https://www.yangzeye.net/mp4/xsjzspjc.mp4"></mip-video><p>手机用户请全屏观看:杨泽业新手建站视频教程:怎么在虚拟主机上面搭建一个独立网站</p></div>
复制代码
代码说明:poster="" 这里是自定义视频的缩略图的,本演示代码就不加了,所以为空。 代码演示查看效果:(手机和电脑都点击查看一下效果) 1、怎么在虚拟主机上面搭建一个独立网站:
二、添加腾讯视频、爱奇艺、优酷等非.mp4结尾的视频代码。 获取代码的方法:以腾讯视频《使用phpstudy在本机安装一个mipjz程序的网站》为例: 点击分享--复制通用代码,如图: 官方原有的代码如下: - <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=e086764fwss" allowFullScreen="true"></iframe>
复制代码
代码参数说明: 1、<div> 添加一个区块(可不用)class="dnsp" 定义为dnsp的样式 (可不用) align="center" 居中显示(可不用)。 2、<mip-iframe>标签是官方推荐标签,和iframe标签使用规则差不多,但是<mip-iframe>必须指定宽度和高度,调用的资源必须是https开头的。 2、frameborder="0" 无边框。width="720"宽度为720px ,height="460"高度为460px ,src="视频地址",接视频地址,allowfullscreen 就是可以全屏观看。
2.1、添加腾讯视频调用的mip代码,使用mip-iframe标签。 - <div class="dnsp" align="center"><mip-iframe frameborder="0" width="宽度" height="高度" src="视频地址" allowfullscreen></mip-iframe><p>视频描述</p></div><div class="sjsp" align="center"><mip-iframe frameborder="0" width="宽度" height="高度" src="视频地址" allowfullscreen></mip-iframe><p>视频描述</p></div>
复制代码- <div class="dnsp" align="center"><mip-iframe frameborder="0" width="720" height="460" src="https://v.qq.com/iframe/player.html?vid=m0327hrw0yj&auto=0" allowfullscreen></mip-iframe><p>电脑用户请全屏观看:杨泽业向你推荐必看视频《管道的故事》,越早知道越好</p></div><div class="sjsp" align="center"><mip-iframe frameborder="0" width="300" height="240" src="https://v.qq.com/iframe/player.html?vid=m0327hrw0yj&auto=0" allowfullscreen></mip-iframe><p>手机用户请全屏观看:杨泽业向你推荐必看视频《管道的故事》,越早知道越好</p></div>
复制代码
PS:腾讯视频地址末尾是增加了&auto=0,那样就不会自动播放了。
2.2、添加爱奇艺视频调用的mip代码,使用mip-iframe标签。 - <div class="dnsp" align="center"><mip-iframe frameborder="0" width="720" height="460" src="https://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=0b530fb738dbb4124dc628a353107f8e&tvId=5130645209" allowfullscreen></mip-iframe><p>电脑用户请全屏观看:杨泽业向你推荐必看视频《管道的故事》,越早知道越好</p></div>
- <div class="sjsp" align="center"><mip-iframe frameborder="0" width="300" height="240" src="https://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=0b530fb738dbb4124dc628a353107f8e&tvId=5130645209" allowfullscreen></mip-iframe><p>手机用户请全屏观看:杨泽业向你推荐必看视频《管道的故事》,越早知道越好</p></div>
复制代码
2.3、添加优酷的mip调用视频代码,使用mip-iframe标签。 - <div class="dnsp" align="center"><mip-iframe frameborder="0" width="720" height="460" src="https://player.youku.com/embed/XMzQxMjI5ODUxMg==" allowfullscreen></mip-iframe><p>电脑用户请全屏观看:杨泽业向你推荐必看视频《管道的故事》,越早知道越好</p></div>
- <div class="sjsp" align="center"><mip-iframe frameborder="0" width="300" height="240" src="https://player.youku.com/embed/XMzQxMjI5ODUxMg==" allowfullscreen></mip-iframe><p>手机用户请全屏观看:杨泽业向你推荐必看视频《管道的故事》,越早知道越好</p></div>
复制代码
|