海创软件组-两周小结-video-vue-全屏-hover样式-css变量

最新推荐文章于 2024-09-20 09:21:03 发布

原创

最新推荐文章于 2024-09-20 09:21:03 发布 · 831 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css #js

本文深入探讨了使用video.js和vue-video-player创建视频组件的详细步骤，包括安装、配置和自定义样式，以及如何在Vue项目中实现平滑的组件过渡动画，提升用户体验。

写这篇博客来总结一下两周遇到的问题吧。

一、视频组件
由于往后的日子需要做一个交通管理系统，需要使用到视频播放器，所以花了点时间在视频组件上。

视频播放器，我一般都是采用video.js和他的插件vue-video-player两种方式创建的。
首先就先说一下如何使用video.js吧
1：video.js
需求：对于简单的视频播放需求来说，video.js足以胜任了。
它可是支持HTML5和Flash的视频播放器呦。

（1）：安装video.js

npm install -s video.js

（2）：在main.js文件中全局引入video.js的相关文件

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

（3）：组件使用video

<template>
  <div class="video_text">
    <video
      id="myVideo"
      class="video-js"
    >
      <source
        :src="videoUrl"
        type="video/mp4"
      >
    </video>
  </div>
</template>

<script>
  export default {
   
   
    name: "Video",
    data() {
   
   
      return {
   
   
        videoUrl:'...',//视频地址
      };
    },
    mounted() {
   
   
      this.initVideo();  //初始化视频播放器
    },
    methods: {
   
   
      initVideo() {
   
   
        //初始化视频方法
        let myPlayer = this.$video(myVideo, {
   
   
          //是否显示控制栏
          controls: true,
          //是否自动播放,muted:静音播放
          autoplay: false,
          //是否静音播放
          muted:false,
          //是否流体自适应容器宽高
          fluid:true,
          //设置视频播放器的显示宽度（以像素为单位）
          width: "800px",
          //设置视频播放器的显示高度（以像素为单位）
          height: "400px"
        });
      }
    }
  };
</script>

<style lang="less">
  .video_text{
   
   
    width: 70%;
    margin: 0 auto;
  }
  video:focus{
   
   
    outline: 0;      //去掉选中蓝框
  }
  .video-js .vjs-big-play-button{
   
   
    /*对播放按钮的样式进行设置*/
    width: 100px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
  }
</style>

效果图：
在这里插入图片描述
（4）：附上video.js的一些基本方法

myPlayer.ready(function(){
   
   
  //视频播放器初始化完成后的回调函数，this代表当前播放器，可以在这进行一系列的操作（myPlayer为我视频播放器对象）
  myPlayer.play();  //播放
  myPlayer.pause(); //暂停
  var currentTime = myPlayer.currentTime(); //当前播放进度
  myPlayer.currentTime(120); //自定义修改当前进度
  var duration = myPlayer.duration(); //加载完成视频后就可以获取视频总时长了，注意：在flash情况下无效！
  var buffered = myPlayer.buffered(); //视频缓冲，返回值为下载了多大文件
  var bufferedPercent = myPlayer.bufferedPercent(); //视频缓冲，返回值为下载了百分之几
  var volume = myPlayer.volume(); //获取视频音量大小，值在0-1之间
  myPlayer.volume(0.2); //设置视频音量大小
  var width = myPlayer.width(); //获取视频的宽度
  myPlayer.width(640); //设置视频的宽度
  var howTallIsIt = myPlayer.height(); //获取视频的高度
  myPlayer.height(200);  //设置视频高度
  myPlayer.size(640,480); //同时设置视频高宽
  myPlayer.enterFullScreen(); //视频全屏显示
  myPlayer.enterFullScreen(); //视频退出全屏显示
})

除此之外，我们还可以绑定监听事件：

//视频播放完毕的回调事件
myPlayer.on("ended", function(){
   
   
  console.log("end", this.currentTime());
});
//视频暂停的回调事件 
myPlayer.on("pause", function

最低0.47元/天解锁文章