Front-end implements video playback function----vue-video-player --save

step one:

npm install plugin: npm install vue-video-player --save

If an error is reported, install the specific version

As shown below: npm install --save [email protected]

If it is displayed in the package.json file, the installation is successful.

Step 2:

Partial introduction---here because only one page requires all the local introductions used

Import it on the required page (be careful not to write the wrong path here)

Step 3: Use components in the page

Step 4: Write the passed parameters in data

Step 5: Write methods into the callback function

Step 6: Note (the width and height of the component must be set) Add component style

In this way, a video playback function is completed. It can fast forward, play back, go to full screen, drag the scroll bar, and automatically replay after the video ends.

Complete example:

Complete code:

           </div>
       </div>
   </div>
</div>
</template>
<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
},
data () {
return {
       queryParams:{

       },
       tableData: [{
       date: '2016-05-02',
       equno: '1',

       }, {
       date: '2016-05-04',
       equno: '2',

       }, {
       date: '2016-05-01',
       equno: '3',

       }, {
       date: '2016-05-03',
       equno: '4',
       }],
       playerOptions: {
           Playbackrates: [0.5, 1.0, 1.5, 2.0], // Optional playback speed
           Autoplay: false, // Hershey begins playback.
           muted: false, // Any audio will be muted by default.
           loop: false, // Whether to restart the video as soon as it ends.
           preload: 'auto', // Recommend whether the browser should start downloading video data after loading the <video> element. The auto browser chooses the best behavior and starts loading the video immediately (if the browser supports it)
           Language: 'zh-CN',
           : '16:9', // Put the player into fluid mode and use this value when calculating the player's dynamic size. The value should represent a ratio - two numbers separated by a colon (e.g. "16:9" or "4:3")
           fluid: true, // When true, Video. js player will have fluid size. In other words, it will scale proportionally to fit its container.
           sources: [{
           type: "video/mp4", // Type               fullscreenToggle: true // using using using using using using       using using using through use using off off out off off out off outps outps out out Through out through out through ‐ ‐ ‐ ‐ ‐ nw, /span>   playerStateChanged(playerCurrentState) {    / /Playback state change callback   },   // console.log('player Canplaythrough!', player)   onPlayerCanplaythrough(player) {    //The readyState of the media is HAVE_ENOUGH_DATA or higher. This means that the entire media file can be played without buffering.    },   a>   //The readyState of the media is HAVE_FUTURE_DATA or higher   }, console.log(player)   onPlayerTimeupdate($event) {    // Triggered when the current playback position changes.    }, console.log(player)   onPlayerLoadeddata($event) {    // Triggered when the player downloads data at the current playback position   }, console.log(player)   onPlayerPlaying($event) {    // Playback callback has started   }, console.log(player)   onPlayerWaiting($event) {    // ReadyState change on DOM element causes playback to stop   }, console.log(player)   onPlayerEnded($event) {    // Video Callback after playing   }, console.log('player pause!', player)   onPlayerPause(player) {    // Pause Callback   }, console.log('player play!', player)   onPlayerPlay(player) { //Playback callback methods:{ }, }               TimeDisplay: false, // Whether to display the remaining time function                DurationDisplay: true, // Display duration               timeDivider: true, // Separator of current time and duration           controlBar: {

   console.log('player current update state', playerCurrentState)
   },
   //Bind the listener Set to the ready state of the component. The difference with an event listener is that if the ready event has occurred, it will trigger the function immediately. .
   playerReadied(player) {
   console.log('example player 1 readied', player);
   }
} } a>   display: block;   .vjs-paused.vjs-has-started .vjs-big-play-button {    .vjs-paused .vjs-big-play-button,   }       height: 98%!important;       width: 98%!important;   .video-player{    }       align-items: center;       justify-content: center;       display: flex;       height: 80%;       width: 50%;   .boxvideo{    }       align-items: center;       display: flex;       height: 80%;       width: 100%;               margin-bottom: 0px!important; {            .el-form-item{            padding-left : 60px;           align-items: center;           justify-content: flex-start;           Display: Flex;            using using width: 100%;        .searchform{                line-height: 30px; =42> }                color: #333333;               font-weight:bold;               font-size: 18px;           .title-text{        using having }        .line {            padding-left: 50px;           align-items:center;           Justify -content: flex-start;           Height: 75px;            width: 100%;        .top-title {        align-items: center;       justify-content: center;       flex-direction: column;       .card { / =18> display: flex;        margin: 0 auto;       height: 50rem;       width: 98%;   .box-main{ <style rel="stylesheet/scss" lang="scss" scope> </script>
}

   .video-js .vjs-big-play-button {
   font-size: 1.5rem;
   line-height: 4.5rem;
   height: 4.5rem;
   width: 4.5rem;
   border-radius: 2.5rem;
   background-color: #73859f;
   background-color: rgba(115, 133, 159, .5);
   border-width: 0.15rem;
   margin-top: 25%;
   margin-left: 45%;
   }

/* The play arrow in the middle */ font-size: 3.63rem; }

   /* 加载圆圈 */
   .vjs-loading-spinner {
   font-size: 2.5em;
   width: 2em;
   height: 2em;
   border-radius: 1em;
   margin-top: -1em;
   margin-left: -1.5em;
   }
   .box-table{
       width: 50%;
       height: 80%;
           .el-table{
               width:90%;
               height:100%;
               margin-left:40px
           }
   }
}
</style>

———————————————————————————————————————————
Completed flowering! ! ! ! ! !

Front-end implements video playback function----vue-video-player --save

Guess you like