“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

I haven’t updated the article in recent half a month (I was busy writing the code). When I was writing the live broadcast these two days, I found that many online plug-ins, such as dplayer, VUE-video-player, flv.js, video.js, etc., could not be well used in the actual project. Or is the cause of the browser have already abolished, or an error is not solved, if you write your own articles, don’t care whether can use, like copy and paste, copy from the official or unofficial place in the past, the pieces of the same article, may be I am too food, not to use it.

Here’s a note about the plugin I used today:

Watermelon player

The installation

I used it in Vue, so install xgplayer directly NPM.

Component code

Create a new component, videoPlayer.vue, component code:

<template>
  <div class>
    <div ref="video" id="mmid"></div>
    <div class="barrage-box">
      <div class="b-text">barrage</div>
      <div class="input-box">
        <el-input placeholder="Please enter the content" v-model="barrageValue">
          <template slot="append">
            |
            <span @click="save()">send</span>
          </template>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import Player from 'xgplayer';
import FlvPlayer from 'xgplayer-flv'; / / FLV format
import HlsJsPlayer from 'xgplayer-hls.js'; / / M3U8 format
export default {
  data() {
    return {
      videoPlayer: null.barrageValue: ' '
    };
  },
  props: {
    cover: ' '.// Live cover image
    videoSrc:' '
  },
  mounted() {
    this.getVideo();
  },
  methods: {
    getVideo() {
      this.$nextTick(() = > {
        console.log(this.videoSrc);
        this.videoPlayer = new FlvPlayer({
          el: document.querySelector('#mmid'),
          url: this.videoSrc,
          width: '100%'.height: '714px'.volume: 0.6.// Initial volume
          autoplay: false.// Auto play
          playsinline: true.isLive: true.cors: true.poster: this.cover, / / cover
          playbackRate: [0.5.0.75.1.1.5.2].// Double speed display
          defaultPlaybackRate: 1.danmu: {
            panel: true.comments: [
              // Array of bullets
              {
                duration: 15000.// Display duration of barrage, ms (minimum 5000 ms)
                id: '1'.// The barrage id must be unique
                start: 3000.// The time when the barrage appears is milliseconds
                prior: true.// This bullet screen will be displayed first. Default is false
                color: true.// This barrage is a color barrage. The default value is false
                txt: ' '.// Barrage text content
                mode: 'top' // Display mode, top center at the top, bottom center at the bottom, scroll, default is scroll}].area: {
              // Barrage display area
              start: 0.// The ratio of the height of the player from the top of the area to the top of the player
              end: 1 // The ratio of the height of the player from the bottom of the area to the top
            },
            closeDefaultBtn: false.// The switch provided by watermelon player is used by default instead of the default switch provided by watermelon player
            defaultOff: true // The barrage will not be initialized by default}}); }); },// Send a barrage
    save() {
      if (this.barrageValue) {
        let id = 0;
        this.videoPlayer.danmu.sendComment({
          // Send a barrage
          duration: 15000.id: 'chat' + id++,
          txt: this.barrageValue,
          style: {
            color: '#ffffff'.fontSize: '18px'.// border: '1px solid #ff9500',
            borderRadius: '50px'.padding: '5px 12px'.backgroundColor: 'rgba (255, 255, 255, 0.1)'}}); }}}};</script>
<style lang="scss" scoped>
.barrage-box {
  display: flex;
  align-items: center;
  padding: 28px 44px;
  margin-bottom: 26px;
  background-color: # 282828;
  .b-text {
    position: relative;
    width: 88px;
    height: 40px;
    padding-left: 32px;
    margin-right: 40px;
    font-size: 18px;
    color: #f1a475;
    line-height: 40px;
    border-radius: 23px;
    border: 1px solid #f1a475;
    &::before {
      position: absolute;
      top: 50%;
      left: 14px;
      transform: translateY(-50%);
      width: 9px;
      height: 9px;
      background: #f1a475;
      border-radius: 50%;
      content: ' '; }}.input-box {
    width: 48%;
    background: # 171616;
    border-radius: 28px;
    span {
      padding-left: 14px;
      &:hover {
        color: #ffffff;
      }
    }
  }
}
/deep/ {
  .el-input__inner {
    border-color: transparent;
    background-color: transparent;
  }
  .el-input-group__append {
    padding-right: 30px;
    border-color: transparent;
    background-color: transparent;
    cursor: pointer; }}</style>
Copy the code

Description of some key fields

  • cover: Live cover image, you can delete according to your needs;
  • videoSrc: Live links, and the back-end returns a push flow of addresses to the front side, then be sure to ask what is the address format, this time when I was in the alignment, because is the first time to write live function, the back-end returns the RTMP format, lead to can’t play, then asked, found the back-end side can be according to the format of the front end to return to, Normal isFLV format and M3U8 formatIn the component, we write it differently according to different formats:
  • Playback M3U8 needs to be installednpm install --save xgplayer-hls.jsIs introduced in the componentimport HlsJsPlayer from 'xgplayer-hls.js'; / / M3U8 format

  • NPM install –save xgplayer-flv; import FlvPlayer from ‘xgplayer-flv’; / / FLV format

  • I wrote the input box to send the function of bullet screen in live broadcast, and I can configure the style I want according to the field in the official document

  • Component references I will not post code, presumably will reference the component and pass the value.

Write in the last

Still have what don’t understand can ask me, or look at the official document.