Detailed explanation of the implementation process of audio and video playback components in Vue documents

Vue.js, as a progressive JavaScript framework for building user interfaces, has excellent performance and applications in all aspects. The Vue.js documentation also provides the implementation process of audio and video playback components, providing front-end developers with convenient operation methods. Next, we will learn more about the implementation process of the audio and video playback component in the Vue.js document.

First, we need to reference the component in the Vue project:

<template>
  <div>
    <audio-player :src="audioSrc" :controls="controls" :autoplay="autoplay" :loop="loop"></audio-player>
    <video-player :src="videoSrc" :controls="controls" :autoplay="autoplay" :loop="loop"></video-player>
  </div>
</template>

<script>
  import AudioPlayer from './AudioPlayer.vue'
  import VideoPlayer from './VideoPlayer.vue'

  export default {
    components: {
      AudioPlayer,
      VideoPlayer
    },
    data () {
      return {
        audioSrc: 'audio.mp3',
        videoSrc: 'video.mp4',
        controls: true,
        autoplay: false,
        loop: false
      }
    }
  }
</script>

Among them, AudioPlayer and VideoPlayer can be coupled, and they are both introduced Create a component named Player and render it as a audio or video component. The code of this Player component is as follows:

<template>
  <div>
    <slot name="before"></slot>
    <slot name="after"></slot>
    <slot name="loading">
      <div class="loading"></div>
    </slot>
    <audio v-if="playerType === 'audio'" :src="src" class="player" :controls="controls" :autoplay="autoplay" :loop="loop" @loadedmetadata="loadedmetadata">
      Your browser does not support the audio tag.
    </audio>
    <video v-else-if="playerType === 'video'" :src="src" class="player" :controls="controls" :autoplay="autoplay" :loop="loop" @loadedmetadata="loadedmetadata">
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
  export default {
    name: 'Player',
    props: {
      src: {
        type: String
      },
      controls: {
        type: Boolean,
        default: true
      },
      autoplay: {
        type: Boolean,
        default: false
      },
      loop: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        playerType: this.getType()
      }
    },
    methods: {
      getType () {
        if (/.mp3$/.test(this.src)) {
          return 'audio'
        } else if (/.mp4$/.test(this.src)) {
          return 'video'
        }
      },
      loadedmetadata () {
        this.$emit('duration', this.$refs.player.duration)
      }
    }
  }
</script>

<style scoped>
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loading:after {
    content: 'Loading...';
  }
  .player {
    width: 100%;
  }
</style>

This Player component uses props to receive the parameters that need to be passed, including src (audio and video file path), controls (whether to display the control bar), autoplay (whether to play automatically), loop (whether to loop playback), etc. . Then, determine the file type through the getType method, and then render the audio or video component according to the corresponding type.

In the Player component, the slot slot is used to insert child components. For example, when you need to add some text or buttons before or after, use the before and after slots. After binding the loadedmetadata event, use the loading slot to display the words "Loading..." to wait for the audio and video files to be loaded.

Finally, set the appearance of the player by citing the following CSS style:

.player {
  width: 400px;
  height: 300px;
  background-color: black;
  color: white;
}

Only the background color and text color are set here. In fact, the player can also be modified through CSS. Detailed settings.

Through the above implementation process, we can easily add audio and video players to the Vue project and implement various common audio and video playback operations. Using the custom components and slots provided by Vue.js allows us to quickly add functions to the project and improve development efficiency.

The above is the detailed content of Detailed explanation of the implementation process of audio and video playback components in Vue documents. For more information, please follow other related articles on the PHP Chinese website!