“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
Vue-video-player Applies to vue’s video.js player component.
1. Installation and introduction
Making the address
NPM address
The installation
npm install vue-video-player --save
Copy the codeIntroduced the global
import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VueVideoPlayer);
Copy the codeLocal introduction
import 'video.js/dist/video-js.css';
import { videoPlayer } from 'vue-video-player';
export default {
components: {
videoPlayer
}
}
Copy the codeVideo Player Configuration
playerOptions : {
playbackRates: [0.7.1.0.1.5.2.0].// Playback speed
autoplay: false.// If true, playback starts when the browser is ready.
muted: false.// Any audio will be eliminated by default.
loop: false.// Causes the video to restart as soon as it ends.
preload: 'auto'.// Suggest whether the browser should start downloading video data after the
language: 'zh-CN'.aspectRatio: '16:9'.// Place the player in smooth mode and use this value when calculating the player's dynamic size. The value should represent a scale - two numbers separated by colons (for example, "16:9" or "4:3")
fluid: true.// When true, the Video.js player will have a fluid size. In other words, it will scale to fit its container.
sources: [{src: ' './ / path
type: 'video/mp4' / / type}].poster: "".// Cover address
notSupportedMessage: 'This video cannot play now, please try again later'.// Allows overwriting the default information displayed when video.js cannot play a media source.
controlBar: {
timeDivider: true.// Time split line
durationDisplay: true./ / total time
remainingTimeDisplay: true.// Remaining playback time
progressControl: true./ / the progress bar
fullscreenToggle: true // Full screen button}}Copy the code2. Use vue-video-player in components
The complete code
<template>
<div class="videoWrap">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied">
</video-player>
</div>
</template>
<script>
import { videoPlayer } from 'vue-video-player';
import 'video.js/dist/video-js.css';
import test from '@/assets/test.mp4';
import img from '@/assets/logo.png'
export default {
data() {
return {
playerOptions : {
playbackRates: [0.7.1.0.1.5.2.0].// Playback speed
autoplay: false.// If true, playback starts when the browser is ready.
muted: false.// Any audio will be eliminated by default.
loop: false.// Causes the video to restart as soon as it ends.
preload: 'auto'.// Suggest whether the browser should start downloading video data after the
language: 'zh-CN'.aspectRatio: 'or'.// Place the player in smooth mode and use this value when calculating the player's dynamic size. The value should represent a scale - two numbers separated by colons (for example, "16:9" or "4:3")
fluid: true.// When true, the Video.js player will have a fluid size. In other words, it will scale to fit its container.
sources: [].poster: "".// Cover address
notSupportedMessage: 'This video cannot play now, please try again later'.// Allows overwriting the default information displayed when video.js cannot play a media source.
controlBar: {
timeDivider: true.// Time split line
durationDisplay: true./ / total time
remainingTimeDisplay: true.// Remaining playback time
progressControl: true./ / the progress bar
fullscreenToggle: true // Full screen button}}}; },computed: {
player() {
return this.$refs.videoPlayer.player; }},components: {
videoPlayer
},
methods: {
/* This is just a list of callback functions. If you don't need them, ignore them
// Play the callback
onPlayerPlay(player) {
console.log("player play!", player);
},
// Pause the callback
onPlayerPause(player) {
console.log("player pause!", player);
},
// Video callback after playback
onPlayerEnded(player) {
console.log("player end!", player);
},
// readyState changes on DOM elements cause playback to stop
onPlayerWaiting(player) {
console.log("Player Waiting",player);
},
// The callback has started playing
onPlayerPlaying(player) {
console.log("Player Playing",player);
},
// Triggered when the player downloads data at the current playing position
onPlayerLoadeddata(player) {
console.log("Player Loadeddata",player);
},
// Triggered when the current playback position changes.
onPlayerTimeupdate(player) {
console.log("Player Timeupdate",player);
},
// Media readyState is HAVE_FUTURE_DATA or higher
onPlayerCanplay(player) {
console.log('player Canplay! ', player)
},
// Media readyState is HAVE_ENOUGH_DATA or higher. This means that the entire media file can be played without buffering.
onPlayerCanplaythrough(player) {
console.log('player Canplaythrough! ', player)
},
// Play the state change callback
playerStateChanged(playerCurrentState) {
console.log("player current update state", playerCurrentState);
},
// Bind the listener to the ready state of the component. The difference with event listeners is that this function is fired immediately if the ready event has already occurred.
playerReadied(player) {
console.log("example player 1 readied", player); }},mounted(){
this.playerOptions.poster = img;
const video = {
src: test, / / path
type: 'video/mp4' / / type
};
this.playerOptions.sources.push(video);
console.log(test)
}
}
</script>
<style lang="stylus" scoped>
.videoWrap{
width: 100%;
height: calc(100vh - 100px);
/deep/ video{
object-fit: fill; // Remove the black space on both sides of the player (object-fitSee the expanded section below for more information)}/* Video start button style */
/deep/.video-js .vjs-big-play-button{
border-width: 3px;
border-color: rgb(255.255.255);
border-style: solid;
border-radius: 50%;
width: 56px;
height: 56px;
line-height: 50px;
background-color: rgba(0.0.0.0);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* Scroll bar style */
/deep/.video-js .vjs-control-bar{
background-color: rgba(43.51.63.0);
}
/deep/.video-js .vjs-play-progress{
background-color: rgb(238.191.0);
}
/deep/.video-js .vjs-load-progress div{
background-color: rgb(255.255.255); }}</style>
Copy the codeExpand about object-fit properties
Definition:
The object-fit attribute specifies how the contents of an element should fit into the specified height and width of the container. Object-fit is generally used for IMG and video tags. Generally, these elements can be cut, scaled or directly stretched to retain their original proportions.
Attribute values:
| value | describe |
|---|---|
| fill | Default value, not guaranteed to maintain the original scale, content stretching fill the entire content container. That is, the content of the element expands to the outer dimensions of the fully filled container, even if this breaks its inherent aspect ratio. |
| contain | Keep the original size ratio. Content is scaled. That is, if you set an explicit height and width on the replacement element, this value will result in the content size, displayed completely at a fixed scale, but still within the element size. |
| cover | Keep the original scale, but some content may be cut. That is, replace the element content size to maintain the aspect ratio, but change the width and height to completely cover the content element. |
| none | Retain the length and width of the original element content, meaning that the content will not be reset. |
| scale-down | Keep the original size ratio. The content is the same size as one of None or contain, depending on which of them gets the smaller object. |
| inherit | Inherits attributes from the element’s parent. |
