Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run buildCopy the codeThis pro points to note:
1. Performance is not considered; 2. Soft use is only supported; 3
A Vue.js project
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run buildCopy the codeDefault data object description
AutoPlay: false, // Whether currentEnoughToPlay: false, // Whether enoughToPlay pauseing: true, // Paused playing: False, // Sounds: 10, // audio control mutedable: false, // Progress: 0, // allLength: 0, // Total length. CurrentTimeLabel: '0:00', // the default playback time is used to display terminalTimeLabel: '', // the end time currentTime: 0, // current time currentIndex: 0, // default currently playing fragmentation guidance videoInstance: null, // currently active videoInstance canvasInstance: Null, // Canvas instance playList: [] // Shard listCopy the code1. Drop all video fragments into the DOM first
2. Control the current fragment guidance and switch the instance DOM
3. CurrentTime of video will change as long as the video can be played. Monitor the drawimage that triggers canvas through this property
4. Use canvas to drawimage to capture the current fragment (i.e., the video instance pointed to)
5. Connect fragments using the onend event of video
There is a problem
1. A video error may occur when you drag the progress bar back and forth
2. Compatibility problems
(3).