To prepare

• Vue2.0
• Dplayer
• hls.js

start

Dplayer & hls.js

• Install dplayernpm i dplayer --save
• Install the HLS. Jsnpm i hls.js --save

Video – player. Vue file

• Consider code reuse first, so we need to extract it into components

• HTML code:

<template>
  <div ref="dplayer"></div>
</template>
Copy the code

• The following code

1. History and video access through the interface

import { getDatasPost, getDatasGet } from '@/api/http' // Interface services
import { videoHistoryTime, getVideoHistoryTime } from '@/api/config' // Interface services
Copy the code

2. Import the files we need

// HLS. Js needs to be introduced before dplayer
const Hls = require('hls.js')
import DPlayer from 'dplayer'
Copy the code

3. Values that need to be accepted as child components

// Vue code
// props can be simplified to an object, because it is an iteration
export default {
  name: 'VideoDplayer'.props: {
    // Play the address
    dpSrc: {
      type: String.default() {
        return ' '}},/ / video id
    videoId: {
      typeof: Number.default() {
        return 0}},// Video format
    videoType: {
      type: String.default() {
        return ' '}}},Copy the code

4. The data we need

  data() {
    return {
      dplayerSrc: ' '.startTime: 0.// Start time
      endTime: 0 // End time}},Copy the code

5. This is a wasted effort

  computed: {
    /** * dpSrc */ in the local cache props
    dpSrcComputed() {
      return this.$props.dpSrc // Locally computed attribute stores}},Copy the code

6. Mounted hook to retrieve the playback time

 mounted() {
   // Get historical playback records
   this.getInterfaceDatas()
 },
Copy the code

7. Due to business logic, this only involves saving records when leaving the current page. Same for specific needs

• This step completes, storing the playback time in the database via the interface

beforeDestroy() {
// Interface request parameters
  const obj = {
  }
  // Send a request to store the playback time
  getDatasPost(videoHistoryTime, obj)
    .then()
    .catch((res) = > {
      console.log(res)
    })
},
Copy the code

Methods 8. The methods

methods: {
  /** * build dplayer *@param { String }Url Video playing address *@param { Number }Num Video playback record */
  setDplayer(url, num) {
    let options
    // When the video format is M3U8
    if (this.$props.videoType === '.m3u8') {
      / / dplayer configuration
      options = {
        / / get the dom
        container: this.$refs.dplayer,
        video: {
          url: url, // Video player address
          / / MSE support
          type: 'customHls'.customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      }
    } else {
      / / dplayer configuration
      options = {
        / / get the dom
        container: this.$refs.dplayer,
        video: {
          url: url, // Video player address
          type: 'auto'}}}const dp = new DPlayer(options) // Create a DPlayer
    // The video jumps to the playback record
    dp.seek(num) / / < -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- it will jump to the corresponding record time
    // Bind the playback event
    dp.on('timeupdate'.() = > {
      // Assign the current time to the end time
      this.endTime = dp.video.currentTime
    })
  },
}
}
Copy the code

Parent component use

    <main class="video-management__main">
      <div
        v-for="(item, index) in videoSrc"
        :key="index"
        class="video-management__content"
      >
        <video-dplayer
          :dp-src="item.src"
          :video-id="item.id"
          :video-type="item.type"
          class="main__content--component"
        ></video-dplayer>
        <span>{{ item.name }}</span>
      </div>
    </main>
Copy the code

Problems encountered

• History is always the initial value in the child component

thinking

• As with Echarts, there is a certain amount of before-and-after management between dom creation and data rendering. The historical playback data should be obtained first, and then the historical playback record can be completed by creating DOM objects

To solve

• The function that creates the dPlayer object is placed in the interface success callback to get the history of the playback

conclusion

• Dom object creation designed for data changes should place the corresponding function in the success callback of the data request