Question

我正在尝试将播放器导入我的vue.js文件中。通常我会在模板之外使用脚本文件，但这不起作用。

在html文件中，我要做的是以下内容：

 <div id="player">
    <div id="vplayer"></div>
 </div>

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>

  <script>
  var urlsrc = "http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8";
  var player = new Clappr.Player({source: urlsrc, parentId: "#vplayer", height: 240, width: 320});
  </script>

在vue.js中我尝试使用以下返回代码执行相同的操作，但它不起作用：

     <template>
      <div id="player">
         <div id="vplayer"></div>
       </div>
     </template>

<script>

export default {

  name: 'player',
  data () {
    return {
      script: 'https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js',
      url: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
      player: new Clappr.Player({source: this.url, parentId: "#vplayer", height: 240, width: 320})
    }
  }
}
</script>

我收到一条错误消息，说播放器未定义。如何让正常的脚本在vue.js中运行？

Answer 1

一种可能的解决方案是在created()挂钩中添加外部脚本并使用脚本onload方法

    <template>
      .... your HTML
    </template>

    <script>
    export default {
        data: () => ({
            url: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
            player: null
        }),
        created() {
            let clapprScript = document.createElement('script')
            clapprScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js')
            clapprScript.onload = this.initPlayer;
            document.head.appendChild(clapprScript)
        },
        methods: {
            initPlayer() {
                this.player = new Clappr.Player({
                    source: this.url,
                    parentId: "#vplayer",
                    height: 240,
                    width: 320
                })
                console.log('Player is loaded')
            }
        }
    }
    </script>

Answer 2

您应该使用Mixins。制作自己的mixin，然后在mixin的methods部分中添加导入脚本中的方法。

  var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

Answer 3

在使用npm：

安装Clappr后，您应该能够这样做

<script>
  import Clappr from 'clappr';
  export default {
      created() {
          let player = Clappr.Player({...});
      }
  }
</script>

这样您就可以像在vanilla html，js场景中一样初始化Vue组件中的clappr实例。

如何将脚本导入.vue文件？

3 个答案: