Heim  >  Artikel  >  Web-Frontend  >  Wie vue.js die Videowiedergabe implementiert

Wie vue.js die Videowiedergabe implementiert

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

So implementieren Sie die Videowiedergabe in vue.js: 1. Installieren Sie das vue-video-player-Plugin. 2. Importieren Sie video.js in main.js. 3. Verwenden Sie das vue-video-player-Plugin.

Wie vue.js die Videowiedergabe implementiert

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue 2.5.2, Thinkpad T480-Computer.

Es gibt ein Vue-Video-Player-Plug-In in Vue. Mit diesem Plug-In können wir die Videowiedergabe erreichen. Werfen wir einen Blick nach unten!

Verwenden Sie den Vue-Video-Player (kann anpassungsfähig sein und unterstützt mehrere Formate)

(1) Installieren Sie das Vue-Video-Player-Plug-In

cnpm install --save vue-video-player

(2) Importieren Sie video.js in main.js

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

( 3) Verwenden Sie

<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>

Empfohlenes Lernen: php-Training

Das obige ist der detaillierte Inhalt vonWie vue.js die Videowiedergabe implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn