html5 - Cara menggunakan Alibaba Cloud Video on Demand Web Player SDK dalam projek Vue.js

Question

Bagaimana untuk menggunakan Alibaba Cloud Video on Demand Web Player SDK dalam projek Vue.js?

Halaman dokumentasi rasmi Alibaba Cloud: https://help.aliyun.com/docum...

Kod saya:

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

Laporan ralat:

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)

Answer 1

Perkenalkan js dalam index.html
Kemudian cari webpackConfig
Konfigurasi dalam build/webpack.base.conf.js

externals: {
  "prismplayer": "prismplayer"
}

Dalam projek anda

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