解决vue移动端项目嵌入优酷视频问题

大家在开发vue 项目的过程中，可能会遇到网络上的视频或者音频嵌入到vue里面的问题...尤其是优酷视频...

官网有关这方面的api,但是在vue里面不好理解...

提示：ie下要有才能显示正常
如果播放器不能显示，请给播放器外层
增加宽度和高度样式
温馨提示：使用打点和百变播放器功能，播放代码需加入newPlayer参数

是因为vue 里用的大部分组件是import方式引入的，你直接贴上去上面的代码可能会有各种报错...

如果你用eslint的更糟糕了...各种语法错误...组件里编译不通过!

我这里研究了一下各种办法，比如在播放组件里面把视频id保存在 localstorge，然后在项目index.html 里面获取id，如下代码：

这里的client_id 是固定的， 你每次从视频列表里单击进入详细时，获取请求数据，把video_id 保存在localstorge,接着index.html来获取video_id 

 优酷请求从这里开始
          let youkuUrl = '?client_id=' + '6f1f024dda5de8c2' + '&video_id=' + data.source_id
          this.$http.get('https://api.youku.com/videos/show.json' + youkuUrl)
          .then((response) => {
            this.playerInfo = response.data
            // 把 client_id 和 video_id 保存在 localstorge ,便于index.html 中 获取这两个值
            var storage = window.localStorage
            storage.setItem('video_id', JSON.stringify(this.playerInfo.id))
          
          }).catch(function (response) {
            console.log(response)
          })
           优酷请求截止

但这样做还是解决不了问题，虽然视频可以播放...但是vue是双向绑定的，而且很多时候要用到缓存...

无论你改了多少次 video_id ， index.html无法获取到你的video_id ，视频还是上次的视频在显示。直到你刷新才会正常

所以最好放弃官网的这种方式！

其实很简单，我们利用iframe来解决视频此问题，就几行代码

这是你的template ，给定一个ref属性，便于vue获取到：

然后获取数据，把视频src 设置到iframe

this.$http.get(url)
      .then((response) => {
        if (response.data.responseHeader.returnCode === 0) {
          let data = response.data.video
          //  保存数据
          this.video = data
          let id = data.source_id
          let youkuUrl = 'http://player.youku.com/embed/' + id
          this.$refs.video.src = youkuUrl

这里的youkuUrl 最关键，它是统一视频播放，只要你提供给它一个video_id 就可以正常播放了...完美解决！
后面就不写了，你看这些行就明白了...最后祝你好运！！！

给个好评价，谢谢。