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

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

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

提示：ie下要有<html/><body/>才能显示正常
如果播放器不能显示，请给播放器外层<div/>增加宽度和高度样式
温馨提示：使用打点和百变播放器功能，播放代码需加入newPlayer参数<div id="youkuplayer" style="width:480px;height:400px"></div>
<script type="text/javascript" src="//player.youku.com/jsapi"></script>
<script type="text/javascript">
var player = new YKU.Player('youkuplayer',{
styleid: '0',
client_id: 'YOUR YOUKUOPENAPI CLIENT_ID',
vid: '替换成优酷视频ID',
newPlayer: true,
autoplay: true
});
</script>

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

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

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

  <script type="text/javascript" src="//player.youku.com/jsapi"></script><script type="text/javascript">window.onload = function () {var storage = window.localStoragelet video_id = JSON.parse(storage.getItem('video_id'))var player = new YKU.Player('youkuplayer',{styleid: '0',client_id: '6f1f024dda5de8c2',vid: video_id,newPlayer: true,});}</script>

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

 优酷请求从这里开始let youkuUrl = '?client_id=' + '6f1f024dda5de8c2' + '&video_id=' + data.source_idthis.$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.localStoragestorage.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获取到：

<div style="width:100%;height:300px"><iframe style="width:100%;height:100%" ref="video" frameborder=0 allowfullscreen></iframe></div>

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

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

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

给个好评价，谢谢。

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

调用优酷云API 在自己的网站嵌入优酷视频
需求: 1.自己的网站嵌入优酷视频 2.实时显示播放时间工作流程 1.申请优酷云 2.创建应用 3.获取播放器代码 4.运行 1.申请优酷云链接 https://cloud.youku.com/ ...
html网页嵌入优酷视频,HTML页面插入优酷视频代码（转）
PS:1.标注斜体部分XNzI0NDYzNzA0是优酷视频的ID号例如优酷视频地址:http://v.youku.com/v_show/id_XNzI0NDYzNzA0.html ...
html在网页中加入视频,如何在自己的网页嵌入优酷视频(easy)
准备: 前端基础 1.优酷开发者账号 + 应用ID 2.如果你还没有优酷开发者账号和应用ID:http://cloud.youku.com/docs/docs?id=0,需要审核,一半半天到一天就OK ...
名编辑电子杂志大师教程 | 如何把优酷视频嵌入到EXE电子书里？
具体操作如下: 1. 点击"页面编辑面板"进入编辑页面. 2. 添加链接,点击工具栏上的"添加链接"按钮->在页面上画框(哪里需要嵌入优酷视频就画在哪里) ...
vue移动端项目缓存问题实践
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面, ...
移动端html如何加载优酷视频,网站怎么引用优酷腾讯视频并支持手机播放
网站上引用一些视频,如何让这些视频既支持电脑播放,又支持手机播放,我们可以通过 iframe 调用的方式来解决这个问题. 首先让我们来了解一下嵌入窗体: iframe属性: allowtranspar ...
Vue移动端项目---尚硅谷外卖
文章目录 Vue移动端项目--尚硅谷外卖项目目录结构介绍移动端适配头部和底部导航登录注册页面密码登录短信登录 Profile页面未登录已登录 Msite页面首页导航 ShopList ...
2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目一.Vue项目搭建二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...
解决vue移动端适配问题
解决vue移动端适配问题参考文章: (1)解决vue移动端适配问题 (2)https://www.cnblogs.com/both-eyes/p/10106021.html 备忘一下.

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

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

最新文章

热门文章