html5 - 在Vue.js項目中如何使用阿里云視頻點播的Web播放器SDK

問題描述

在Vue.js項目中如何使用阿里云視頻點播的Web播放器SDK?

阿里云的官方文檔頁面：https://help.aliyun.com/docum...

我的代碼:

<template><p class=''> <p 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)

問題解答

在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’ }); }}