Sample code to implement video preview

Implement video file preview in Vue

Implementation steps

• Create Vue Components: Build a Vue component to handle the selection and preview of video files.
• File selection: Add a file input box to allow the user to select a video file.
• Read the file: Listen to file selection events, useFileReaderAPI Reads the selected video file.
• Video preview: Bind the read video file data to<video>TagssrcIn terms of attributes, realize video preview.

Complete code

<template>
  <div>
    <!-- File input box，Allow users to select video files -->
    <input type="file" @change="handleFileChange" accept="video/*">
     <!-- Video player, used to preview selected videos -->
     <video ref="videoPlayer" controls width="640" height="360"></video>
   </div>
 </template>

 <script>
 export default {
   data() {
     return {
       //Storing video files selected by the user
       selectedVideoFile: null
     };
   },
   methods: {
     handleFileChange(event) {
       // Get the list of files selected by the user
       const files = ;
       if ( > 0) {
         // Take the first selected file as the video file to be previewed
          = files[0];
         // Call the preview video method
         ();
       }
     },
     previewVideo() {
       if () {
         // Create a FileReader instance to read the file contents
         const reader = new FileReader();
         // Listen to the load event of FileReader, triggering when the file read is completed
          = (e) => {
           // Get the read file data (in DataURL form)
           const videoData = ;
           // Assign video data to the src attribute of the video player to realize preview
           this.$ = videoData;
         };
         // Read the selected video file in DataURL
         ();
       }
     }
   }
 };
 </script>

 <style scoped>
 /* You can add some styles to beautify the video player */
video {
  margin-top: 20px;
  border: 1px solid #ccc;
}
&lt;/style&gt;

Code Comments

• Template part (<template>）：

  • <input type="file">: Create a file input box,@change="handleFileChange"Listen to file selection events,accept="video/*"Restrict users to only select video files.
  • <video>: Video player,ref="videoPlayer"Used to reference this element in JavaScript,controlsDisplay the video playback control bar,widthandheightSet the width and height of the video player.

• Script part (<script>）：

  • data: DefinitionselectedVideoFileUsed to store video files selected by the user.
  • handleFileChangeMethod: Process the file selection event and obtain the list of files selected by the user. If a file is selected, the first file will be assigned toselectedVideoFile, and callpreviewVideomethod.
  • previewVideoMethod: UseFileReaderRead the selected video file. After the file is read, assign the read file data to the video player.srcAttributes to realize video preview.

• Style part (<style>）: Add some basic styles to the video player, such as margins and borders.

Instructions for use

• Create Components: Save the above code as a Vue component file, for example。
• Introducing components: Introduce this component in the parent component that needs to use the video preview feature.

<template>
  <div>
    <VideoPreview />
  </div>
</template>

<script>
import VideoPreview from './';

export default {
  components: {
    VideoPreview
  }
};
</script>

• Run the project: Start the Vue project and you will see a file input box and a video player on the page. Click the file input box to select a video file. After selecting, the video will be automatically previewed in the player.

Things to note

• This method converts video files to DataURL form, which can cause performance problems for larger video files. In actual applications, you can consider usingMethod to create temporary file URLs for preview, which can avoid loading the entire file content into memory.
• Different browsers may support video formats differently, ensuring that the selected video file format is supported by the target browser.

This is the end of this article about implementing sample code for video preview. For more related video preview content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!