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

最新推荐文章于 2023-09-19 17:11:39 发布

铁血猪刚鬣

最新推荐文章于 2023-09-19 17:11:39 发布

阅读量2.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_44583871/article/details/125525391

版权

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, // 默认情况下将会消除任何音频。