引用优酷视频可以减轻公司的服务器压力,而且和自己上传保存视频相比会方便轻松许多,不过相对的需要忍受广告。
首先你需要在优酷里找到你要引用的视频,或者自己上传。然后打开会有一个分享按钮:
以我使用的第二个为例,复制下来如下:
<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;
}
}
}