使用vue-video-player完成h5项目的视频播放

最新推荐文章于 2024-09-10 09:35:05 发布

LYM2020521

最新推荐文章于 2024-09-10 09:35:05 发布

阅读量1.3k

点赞数 1

文章标签： vue js html css

本文链接：https://blog.csdn.net/lym2020521/article/details/119784877

版权

本文介绍了如何在H5项目中使用vue-video-player组件来实现视频播放。首先通过npm安装video.js和vue-video-player，然后在页面中引入并注册组件。接着在data中设置视频播放器的配置选项，包括视频源、封面图片、控制栏等。最后，添加了一些自定义样式以调整播放器的外观。

摘要由CSDN通过智能技术生成

使用vue-video-player完成h5项目的视频播放
1.引入video.js组件
npm install video.js
npm install vue-video-player
2.在页面中引入并注册组件

<script>
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
export default {
  name: "Home",
  components: {
    videoPlayer,
  },
};
</script>

3.主体内容

<template>
  <div class="home">
    <!-- 视频 -->
    <div class="vido">
      <video-player
        class="video-player-box"
        :options="playerOptions"
        :playsinline="true"
      />
    </div>
  </div>
</template>

4.在data中初始化数据

  data() {
    return {
      // 视频播放器
      playerOptions: {
        // videojs options
        muted: false,
        autoplay: false,
        loop: false,
        preload: "auto",
        language: "zh-CN",
        fluid: true,
        aspectRatio: "16:9",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources:
          "https://vod.pipi.cn/fe5b84bcvodcq1251246104/7e3ad6f55285890797987579689/f0.mp4",
        poster:
          "https://obj.pipi.cn/friday/7d13ad1127f0297dce3362dc279e0fdf.jpg",
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: true,
          fullscreenToggle: true, // 全屏按钮
        },
      },
    };
  },

5.视频基本样式

<style lang="less" scoped>
.home {
  width: 100vw;
  height: 100vh;
  .vido {
    width: 340px;
    height: 134px;
    position: absolute;
    right: 17px;

    /deep/.vjs-big-play-button {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      left: 150px;
      top: 76px;
    }
    /deep/.video-player-box {
      touch-action: none;
      .video-js .vjs-time-control {
        min-width: 0px;
        padding-left: 1px;
        padding-right: 1px;
        display: block;
      }
      .video-js .vjs-remaining-time {
        display: none;
      }
    }
  }
}
</style>