html5 - 在Vue.js项目中如何使用阿里云视频点播的Web播放器SDK
某草草
某草草 2017-05-16 13:35:06
[HTML讨论组]

在Vue.js项目中如何使用阿里云视频点播的Web播放器SDK?

阿里云的官方文档页面:https://help.aliyun.com/docum...

我的代码:

<template>
<p class="">
  <p class="prism-player" id="J_prismPlayer" style="position: absolute"></p>

</p>
</template>
<style>
</style>

<script>
var player = new prismplayer({
  id: 'J_prismPlayer',
  width: '100%',
  autoplay: false,
  //播放方式一:推荐
  prismType: 2,
  vid: '',
  accId: '',
  accSecret: '',
  apiKey: '',

  // vid : '',
  // playauth : '',
  showBarTime: 3000000,
  cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png'
});
export default {
  created: function() {

  }
}
</script>

报错:

prism-h5-min.js:2 Uncaught TypeError: 没有为播放器指定容器
    at new i (prism-h5-min.js:2)
    at eval (eval at <anonymous> (app.js:1555), <anonymous>:4:14)
    at Object.<anonymous> (app.js:1555)
    at __webpack_require__ (app.js:687)
    at fn (app.js:110)
    at eval (eval at <anonymous> (app.js:1562), <anonymous>:7:3)
    at Object.<anonymous> (app.js:1562)
    at __webpack_require__ (app.js:687)
    at fn (app.js:110)
    at eval (eval at <anonymous> (app.js:1053), <anonymous>:19:77)
某草草
某草草

全部回复(1)
高洛峰

在index.html引入js
然后在build/webpack.base.conf.js中找到webpackConfig
里面配置

externals: {
  "prismplayer": "prismplayer"
}

在你的项目中

export default {
  mounted: function() {
    let player = new prismplayer({
      id: 'J_prismPlayer',
      width: '100%',
      autoplay: false,
      //播放方式一:推荐
      prismType: 2,
      vid: '',
      accId: '',
      accSecret: '',
      apiKey: '',
    
      // vid : '',
      // playauth : '',
      showBarTime: 3000000,
      cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png'
    });
  }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号