酷播云播放器html5播放器JS代码和VUE项目调用(例子参考)-CSDN博客

本文链接：https://blog.csdn.net/suny2020/article/details/147950739

本文介绍了三种在网页中嵌入HTML5播放器的方法。首先是通过JS代码直接调用Polyv播放器，指定播放器的容器、尺寸和视频ID。其次是通过IFrame调用，设置IFrame的尺寸和视频ID。最后是在Vue项目中动态加载播放器脚本，并在组件挂载时初始化播放器，组件销毁时销毁播放器实例。这些方法适用于不同的开发场景，帮助开发者灵活地在网页中嵌入视频播放功能。

播放器html5播放器JS代码

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>

通用代码IFrame调用

<iframe style='width: 600px;height: 338px' frameborder='no' allowfullscreen mozallowfullscreen webkitallowfullscreen src='//go.plvideo.cn/front/video/preview?vid=ef03a1d2e5ef7d1f44476378d4cf44e3_e'></iframe>

播放器VUE项目调用(例子参考)

<template>
  <div id="player"></div>
</template>
<script>
export default {
  data() {
    return {
      vodPlayerJs: 'https://player.polyv.net/resp/vod-player/latest/player.js',
      vid:'88083abbf5bcf1356e05d39666be527a_8',
    };
  },
 
  mounted(){
      this.loadPlayerScript(this.loadPlayer);
  },
 
  methods: {
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement('script');
        myScript.setAttribute('src', this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
 
    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;
      this.player = polyvPlayer({
        wrap: '#player',
        width: 800,
        height: 533,
        vid: this.vid ,
      });
    }
  },
  destroyed() {
    if (this.player) {
        this.player.destroy();
    }
  }
};
</script>