网页引用优酷视频并添加封面自动播放

　

优酷网页

引用优酷视频可以减轻公司的服务器压力，而且和自己上传保存视频相比会方便轻松许多，不过相对的需要忍受广告。

首先你需要在优酷里找到你要引用的视频，或者自己上传。然后打开会有一个分享按钮：

以我使用的第二个为例，复制下来如下：

<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"

以上完成，最终代码如下

<p 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>

       <p v-if="vshow" class="s2_img_video" @click="showVideo">

       </p>

</p>

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;
      }
    }
  }

相关阅读

李学凌谈收购Bigo：将使YY成为世界领先的视频社交媒体平

A5创业网（公众号：iadmin5）3月6日消息，昨日YY欢聚时代宣布完成对海外视频社交平台BIGO的全资收购，总交易额约14.5亿美元。李学凌发内部

微博与优酷达成合作 共建粉丝内容社区生态

8月26日，微博宣布与优酷达成深度战略合作。即日起，微博超话社区接入优酷，并在优酷星球落地。另外，双方在短视频上也将进一步打通，通过

视频社交，沟通交流的新趋势

今年的春节，互联网巨头纷纷以视频维度入局春晚，再看看我们的社交平台，短视频、vlog、直播逐渐取代图文成为了一个重要的社交方式。许

节操视频播放器

小编使用的是jiecaovideoplayer开源库， 原项目GitHub地址：https://github.com/lipangit/JieCaoVideoPlayer1.在app的gradle文件中添

腾讯视频怎么下载视频到电脑以及手机上

在每天的时间分配中，大部分都是花在学习和工作之中了，但是在放学和下班之后是需要休息的，绝大部分人是在听音乐和看电视剧来放松心情