Two Methods to Include Video.js in UniApp

1. CDN Integration: This approach involves linking external resources, but it is not recommended due to dependency on third-party availability, which can disrupt functionality if the CDN fails.

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

2. NPM Installation: Download Video.js locally into the project's node_modules diretcory using the command:

npm install video.js

This guide focuses on the NPM method for implementing Video.js in a UniApp environment.

First, install Video.js via the command above. Then, import it in the main.js file of you're project:

// Import Video.js and its styles
import VideoPlayer from 'video.js'
import 'video.js/dist/video-js.min.css'
Vue.prototype.$videoPlayer = VideoPlayer

In the component where video playback is required, add a container element:

<view class="video-container" ref="videoContainer" style="width: 100%; height: 100%;"></view>

Set up the player in the component's lifecycle hook, such as onReady:

onReady() {
    const videoElement = document.createElement('video');
    videoElement.id = 'mediaPlayer';
    videoElement.style = 'width: 100%; height: 100%;';
    videoElement.controls = true;
    videoElement.preload = 'auto';
    videoElement.setAttribute('playsinline', true);
    videoElement.setAttribute('webkit-playsinline', true);
    videoElement.setAttribute('x5-video-player-type', 'h5');
    
    const mediaSource = document.createElement('source');
    mediaSource.src = 'http://example.com/video/stream.m3u8';
    videoElement.appendChild(mediaSource);
    
    this.$refs.videoContainer.$el.appendChild(videoElement);
    
    const mediaPlayer = this.$videoPlayer('mediaPlayer', {
        poster: '',
        title: 'Sample Video',
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        autoDisable: true,
        preload: 'none',
        language: 'en',
        fluid: true,
        muted: false,
        aspectRatio: '16:9',
        controls: true,
        autoplay: false,
        loop: false,
        screenshot: true,
        controlBar: {
            volumePanel: { inline: false },
            timeDivider: true,
            durationDisplay: true,
            progressControl: true,
            remainingTimeDisplay: true,
            fullscreenToggle: true,
            pictureInPictureToggle: true
        }
    }, function() {
        this.on('error', function(error) {
            console.log('Playback error occurred', error);
        });
        this.on('stalled', function(stallEvent) {
            console.log('Network stall detected', stallEvent);
        });
    });
}

With this setup, the player can handle M3U8 streams. Key Video.js API methods include:

volume() // Get or set audio level
currentTime(seconds) // Seek to a specific time
duration() // Retrieve total video length
play() // Start playback
pause() // Pause playback
dispose() // Destroy player instance
on('event', callback) // Attach event listeners
trigger('event') // Manually trigger events

Configuration options:

• autoplay: Enable automatic playback on ready
• controls: Show or hide player controls
• height / width: Set player dimensions in pixels or as strings
• loop: Toggle video looping
• muted: Set initial mute state
• poster: URL for preview image
• preload: Set preload behavior ('auto', 'metadata', 'none')
• children: Define child components for customization

Ensure the package.json includes Video.js as a dependency:

{
  "dependencies": {
    "video.js": "^8.0.4"
  }
}