西瓜播放器 vue+xgplayer播放mp4/hls视频流。

npm安装:

npm install xgplayer

线上引用地址：

<script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script>

1).mp4点播

<div id="video"></div>

let player = new Player({
  id: 'video',
  url: '//abc.com/**/*.mp4'
});

2).hls播放：
xgplayer-hls
对于hls协议的点播(直播)可以使用该插件完成，这个插件没依赖任何第三方代码完全自主实现，从解m3u8文件到ts文件。优点是代码结构清晰、比hls.js轻量很多、官方维护。缺点是兼容性有瑕疵，没有按hls标准的视频可能会无法播放。

xgplayer-hls.js
对于hls协议的点播(直播)可以使用该插件完成，该插件是对hls.js的封装，力求稳定的同学可以使用该插件
这里使用了xgplayer-hls.js。

<template>
  <div id="video"></div>
</template>

import Player from "xgplayer";
import HlsJsPlayer from "xgplayer-hls.js";
data() {
    return { player: null };
},
 methods: {
    init() {
      this.$nextTick(() => {
        this.player = new HlsJsPlayer({
          id: "video",
          url: "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8",
          autoplay: true,
          poster: './poster.png', //视频封面
          //cors: true, 请求是否跨域 
        });
      });
    },
  },

3).弹幕/发送弹幕：

<template>
  <div id="video">
    <!-- 弹幕 -->
    <div class="bullet-chat">
      <input v-model="value" type="text" />
      <button @click="save(value)">发送</button>
    </div>
  </div>
</template>

<script>
import Player from "xgplayer";
import HlsJsPlayer from "xgplayer-hls.js";
//import HlsPlayer from "xgplayer-hls";
export default {
  data() {
    return { value: "", player: null };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.player = new HlsJsPlayer({
          id: "video",
          url: "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8",
          autoplay: true,
          danmu: { //弹幕数组
            comments: [
              {
                duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
                id: "1", //弹幕id，需唯一
                start: 3000, //弹幕出现时间，毫秒
                prior: true, //该条弹幕优先显示，默认false
                color: true, //该条弹幕为彩色弹幕，默认false
                txt: "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", //弹幕文字内容
                style: {
                  //弹幕自定义样式
                  color: "#ff9500",
                  fontSize: "20px",
                  border: "solid 1px #ff9500",
                  borderRadius: "50px",
                  padding: "5px 11px",
                  backgroundColor: "rgba(255, 255, 255, 0.1)",
                },
              },
            ],
          },
        });
      });
    },
    save(val) {
      let id = 0;
      this.player.danmu.sendComment({
        //发送弹幕
        duration: 15000,
        id: "chat" + id++,
        txt: val,
        style: {
          color: "#ff9500",
          fontSize: "20px",
          border: "solid 1px #ff9500",
          borderRadius: "50px",
          padding: "5px 11px",
          backgroundColor: "rgba(255, 255, 255, 0.1)",
        },
      });
    },
  },
};

</script>
<style scoped lang="less">

#video{
  position: relative;
}
.bullet-chat{
  position: absolute;
  bottom: 0vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999999999999;
  input {
    background: #fff;
    border: 1px solid #ccc;
  }
}
</style>