video.js的使用(7.8.4)

最新推荐文章于 2025-04-24 10:22:54 发布

baiduren！

最新推荐文章于 2025-04-24 10:22:54 发布

阅读量1.1k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42454941/article/details/108884134

版权

1.vue中使用

一：安装

npm i video.js

二：main.js中引入

import Vue from 'vue'
import Videojs from 'video.js'
import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json'
import 'video.js/dist/video-js.css'
Videojs.addLanguage('zh-CN',VideojsZhcnLanguage)//设置中文
Vue.prototype.$videojs = Videojs

三：组件中使用

<template>
    <div>
        <video
        id="player"
        class="video-js vjs-big-play-centered"
        preload="none"
        :poster="videoImg"
        >
            <source :src="videoSrc" type="video/mp4"></source>
            <source :src="videoSrc" type="video/webm"></source>
            <source :src="videoSrc" type="video/ogg"></source>
            <p class="vjs-no-js">
                To view this video please enable Javascript, and consider upgrading to a web browser that
                <a href="http://videojs.com/html5-video-support" target="_blank">
                    supports HTML5 video
                </a>
            </p>
        </video>
    </div>
</template>
<script>
let videoOptions = {
    lang:'zh-CN',//设置中文
    width:'300px',
    height:'300px',
    loop:false,//是否循环播放
    autoplay:false,//是否自动播放
    controls:true,//是否显示控制面板
}
export default {
    data(){
        return {
            videoImg:require('@/assets/test.png'),
            videoSrc:require('@/assets/test.mp4')
        }
    },
    mounted(){
        let that = this;
        //创建videojs实例
        let player = this.$videojs('player',videoOptions,()=>{
            that.$videojs.log('Your player is ready!');
            //监听播放完毕事件
            this.on('ended',function(){
                that.$videojs.log('Awww .... over so soon?!')
            })
        })
    }
}
</script>

2.列表循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../js/videojs/video-js.css">
    <script src="../js/videojs/video.js"></script>
    <script src="../js/videojs/lang/zh-CN.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box{
            display: flex;
            height: 100%;
        }
        .box .leftlist{
            width:235px;
            height: 100%;
        }
        .box .leftlist .title{
            text-align: center;
        }
        .box .rightvideo{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 60px;
        }
        #videolist{
            padding: 2px 4px;
            height: calc(100% - 30px);
            overflow-y: scroll;
        }
        #videolist span{
            display: inline-block;
            width: 200px;
            height: 200px;
            padding: 2px;
            border: 1px solid #000;
            margin-bottom: 2px;
        }
        #videolist span img{
            width:196px;
            height: 196px;
        }
        /* video自适应父元素的宽高*/
        #myplayer{
            width:100%;
            height: 100%;
        }
        /*暂停时显示播放按钮*/
        .vjs-paused .vjs-big-play-button,
        .vjs-paused.vjs-has-started .vjs-big-play-button{
            display: block;
        }
        /*播放时显示已播放的时间*/
        .video-js .vjs-time-control{display: block;}
        .video-js .vjs-remaining-time{display: none;}
    </style>
</head>
<body>
   <div class="box">
       <div class="leftlist">
           <div class="title">视频列表（4）</div>
           <div id="videolist"></div>
       </div>
       <div class="rightvideo"></div>
   </div>
   <script>
       var videolist=[
           {
               video:'../video/video1.mp4',
               pic:'../video/video1.jpeg'
           },
           {
               video:'../video/video2.mp4',
               pic:'../video/video2.jpeg'
           },
           {
               video:'../video/video3.mp4',
               pic:'../video/video3.jpeg'
           },
           {
               video:'../video/video4.mp4',
               pic:'../video/video4.jpeg'
           }
       ]
       var player = null;//播放器实例
       var palyIndex = 0;//当前播放的视频
       $(function(){
           var videolistHtml = '';
           videolist.forEach(function(item,index){
                videolistHtml += '<span><img index="'+index+'" src"'+item.pic+'"></span>'
           })
           $('#videolist').html(videolistHtml)
           $('#videolist span img').click(function(){
               var el = $(this)
               palyIndex = el.attr('index')
               palyvideo()
           })
       })
       function playvideo(){
           if(player){
               player.dispose();
               player = null;
               $('.rightvideo').html('')
           }
           var videoHtml = '<video id="myplayer" class="video-js vjs-big-play-centered">'+
           '<p class="vjs-no-js">'+
           'To view this video please enable Javascript,and consider upgrading to a web browser that'+
           '<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>'+
           '</p>'+
           '</video>'
           $('.rightvideo').html(videoHtml)
           player = videojs('myplayer',{
               'language':'zh-CN',
               'poster':videolist[palyIndex].pic,
               'controls':true,
               'sources':[
                   {
                       src:videolist[palyIndex].video,
                       type:'video/mp4'
                   }
               ]
           },function(){
               this.on('loadeddata',function(){
                   videojs.log('资源加载完毕')
               })
               this.on('ended',function(){
                   videojs.log('播放完毕')
                   palyIndex++;
                   if(palyIndex>=videolist.length){
                       palyIndex = 0;//列表播放完后从第一个开始播放
                   }
                   this.src({
                       type:'video/mp4',
                       src:videolist[palyIndex].video
                   })
                   this.play()
               })
           })
           if(player){
               player.src({
                   type:'video/mp4',
                   src:videoHtml[palyIndex].video
               })
            //    player.play();//自动播放
           }
       }
   </script>
</body>
</html>