引用优酷视频可以减轻公司的服务器压力,而且和自己上传保存视频相比会方便轻松许多,不过相对的需要忍受广告。
首先你需要在优酷里找到你要引用的视频,或者自己上传。然后打开会有一个分享按钮:
以我使用的第二个为例,复制下来如下:
<embed src='http://player.youku.com/player.php/sid/XNDAwOTEyMTgyNA==/v.swf' allowFullScreen='true' quality='high' width='100%' height='100%' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
放入页面中如图所示:
没有独立的封面,没有自动播放。
加封面:选择使用一张图片覆盖在上面,点击隐藏。
自动播放:加入属性 flashvars="isAutoPlay=true"
以上完成,最终代码如下
<div class="s2_ri"><embed src='http://player.youku.com/player.php/sid/XNDAwOTEyMTgyNA==/v.swf' allowFullScreen='true' flashvars="isAutoPlay=true" quality='high' width='100%' height='100%' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed><div v-if="vshow" class="s2_img_video" @click="showVideo"></div></div>methods: {showVideo(){this.vshow = !this.vshow;}},
.s2_ri {height: 400px;cursor: pointer;width: 630px;position: relative;.s2_img_video{position: absolute;top: 0;left: 0;background: url("../../assets/brand/66.png") no-repeat 0 0;height: 400px;cursor: pointer;width: 630px;}}}