使用VideoPlayer播放mp4(隐藏控件，点击全屏，窗口自适应父级)

最新推荐文章于 2024-05-16 10:43:00 发布

铁血猪刚鬣

最新推荐文章于 2024-05-16 10:43:00 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：功能文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44583871/article/details/125525391

功能专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中使用VideoPlayer组件播放mp4视频，通过设置隐藏控件并添加点击全屏功能，同时确保视频窗口能够自适应其父级容器的大小。主要步骤包括npm安装、main.js引入和在页面中的具体使用，通过watch监听和方法调整，配合CSS实现自适应布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.npm

npm install vue-video-player --save

2.main.js引入

import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
    
Vue.use(VideoPlayer)

3.页面使用

  <div class="imgBox"  @click="handleOpen('videoPlayer'+id)">
                <video-player
                  class="video-player vjs-custom-skin videoBox"
                   :ref="'videoPlayer'+id"
                  :playsinline="true"
                  :options="playerOptions"
                ></video-player>
              </div>

 playerOptions: {
 controls: false,//控件显示隐藏
        // playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: true, // 视频一结束就重新开始。
        // preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        // aspectRatio : '1:1', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources : [ {
            type : "",
            src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
        } ],
        // sources: [
        //   {
        //     type: "application/x-mpegURL", //如果是直播的话  此处务必这样配置
        //     src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8" //视频url地址
        //   }
        // ],

        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        //隐藏控件后可删除控件组件
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true //全屏按钮
        }
      },

wacth监听

"data"(newName, oldName) {
      if (data.sourType === "video") {
        // myPlayer.reset()

        this.$nextTick(() => {
          this.playerOptions.sources[0].src = data.sourUrl;
        
        });
       
      } 
    },

method

//点击全屏
  handleOpen(name) {
    
      this.full(this.$refs[name].player);

      
    },
      //方法
    full(element) {
      //做兼容处理
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.oRequestFullscreen) {
        element.oRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = document.getElementsByClassName("video-player");
        var cssText = "width:100%;height:100%;overflow:hidden;";
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText + ";" + "margin:0px;padding:0px;";
        document.IsFullScreen = true;
      }
    },

css设置自适应父级

.imgBox {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  background: #1d283b;
  /deep/ .video-js .vjs-tech {
    object-fit: fill;
  }
  /deep/.vjs-custom-skin > .video-js {
    width: 100%;
    height: 100%;
  }
  .videoBox {
    //  object-fit: fill;
    width: 100%;
    height: 100%;
  }
}