本文主要是介绍西瓜视频（xgplayer）播放hls视频，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
平时经常对接视频flv、hls、萤石云等，但是一直没有做记录分享；
今天针对hls西瓜视频的插件来分享记录下，个人觉得xgplayer的体验和对流的控制是要比hls.js要好很多的，先看效果图；
需要注意一下：
*** vite项目下，使用依赖import 的方式播放有问题，需要改为全局引入静态min.js
可以去西瓜视频官网上去f12 自行 down一下文件
<template><div :id="hlsId" />
</template>
<script>
import "xgplayer";
import HlsJsPlayer from "xgplayer-hls.js"
export default {props: {width: {type: Number,default: null},url: {type: String,default: null},poster: {type: String,default: ''},autoplay:{type: Boolean,default: false}},computed: {hlsId() {return 'hls' + Math.floor(1000000000 + Math.random() * 9000000000);}},mounted() {this.initVideo()},methods: {destroy() {this.player && this.player.destroy();},initVideo() {this.destroy();const { width,height,poster,autoplay } = this;this.player = new HlsJsPlayer({id: this.hlsId, // 上面容器的id选择器url: this.url,poster,width,height,autoplay,});},},beforeDestroy() {this.destroy()}
}
</script>
这篇关于西瓜视频（xgplayer）播放hls视频的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
