Home  >  Article  >  Web Front-end  >  How vue.js implements video playback

How vue.js implements video playback

王林
王林Original
2021-10-08 15:39:374104browse

How to implement video playback in vue.js: 1. Install the vue-video-player plug-in; 2. Import video.js in main.js; 3. Use the vue-video-player plug-in.

How vue.js implements video playback

The operating environment of this article: windows10 system, vue 2.5.2, thinkpad t480 computer.

There is a vue-video-player plug-in in vue, which we can use to achieve video playback. Let’s take a look below!

Use vue-video-player (can be adaptive and support multiple formats)

(1) Install the vue-video-player plug-in

cnpm install --save vue-video-player

(2) In main Import video.js

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

into .js (3) Use

<template>
  <div>
    <div v-for="i in 10" :key="i">
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsline="false" :options="playerOptions"></video-player>
      <p>{{&#39;视频&#39; + i}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: &#39;Video2&#39;,
  data () {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: &#39;auto&#39;, // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
        language: &#39;zh-CN&#39;,
        aspectRatio: &#39;16:9&#39;, // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        sources: [{
          type: &#39;video/mp4&#39;, // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
          src: &#39;../../../../static/video1.mp4&#39; // url地址
        }],
        poster: &#39;../../../../static/full_res.jpg&#39;, // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: &#39;此视频暂无法播放,请稍后再试&#39;, // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  }
}
</script>

<style scoped >
  .video-js .vjs-icon-placeholder {
    width: 80%;
    height: 80%;
    display: block;
  }
  /* .video-player {
    width: 50%;
  } */
</style>

Recommended learning: php training

The above is the detailed content of How vue.js implements video playback. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn