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

最新推荐文章于 2024-07-08 16:03:34 发布

置顶

ErpanScript

最新推荐文章于 2024-07-08 16:03:34 发布

阅读量4.5k

点赞数

分类专栏：前端文章标签：解决vue移动端项目嵌入优酷视频问题

本文链接：https://blog.csdn.net/weixin_38123604/article/details/77948265

版权

大家在开发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ÿ