So fügen Sie Videos in VueJS hinzu

So fügen Sie Videos in VueJS hinzu: 1. Fügen Sie einen Videolink über iframe ein. 2. Fügen Sie ein Video hinzu, indem Sie auf das Vue-Video-Player-Plug-In verweisen.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie füge ich Videos zu Vuejs hinzu?

Zusammenfassung von 2 Methoden zum Einfügen von Videos basierend auf Vue:

Methode 1: Iframe-Videolink einfügen

1.1 ##### Derzeit Video abspielen

<div class="video-wrap" style="width:80%;float:left;oveflow:hidden;">
     <iframe :src="this.activeVideo.youtobeURL" frameborder=&#39;0&#39;
     allow=&#39;autoplay;encrypted-media&#39; allowfullscreen style=&#39;width:100%;height:500px;&#39;>
     </iframe>
     <h3>{{this.activeVideo.title}}</h3>
    </div>

1.2#####Videoliste

<div class="video-list" style="float:right;width:20%;text-align:center;">
    <div v-for=&#39;video in videos&#39; :key=&#39;video.id&#39; class="thumbnail" >
     <div class="thumbnail-img" >
      <div style="height:50%;width:100%;position:absolute;z-index:999"
      @click="activeVideoShow(video.id)"></div>
     <iframe :src=&#39;video.youtobeURL&#39; :alt="video.title" />
     </div>
     <div class="thumbnail-info">
      <h4>{{video.title}}</h4>
      <div class="thumbnail-views">
      <span>{{video.speaker}}</span>
      <span>{{video.views}} Views</span>
      </div>
      <div class="thumbnail-describe">
      {{video.describe}}
      </div>
     </div>
    </div>
   </div>

1.3##### definierte Datenstruktur (Demo von mir selbst geschrieben, die tatsächliche vom Hintergrund zurückgegebene Datenstruktur kann unterschiedlich sein ) )

data () {
  return {
   flag:false,
   videos:[{
    id:1,title:'test2',youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA',speaker:'harry', likes:101,views:0,describe:'good'
   },{
    id:2,title:'test3',youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA',speaker:'harry', likes:100,views:75,describe:'good'
   }],
   activeVideo:{
    id:3,title:'test1',thumbnail:'./../../static/images/headImg.png',speaker:'harry', likes:0,views:0,describe:'good',
    youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA'
   }
  }
 }

1.4##### Klicken Sie auf das Video in der Videoliste, um zum aktuellen Video zu wechseln

ps: Zu Beginn wurde das Klickereignis auf den Iframe geschrieben, der Klick jedoch ungültig. Später habe ich ein Div geschrieben, die perfekte Lösung:

   <div style="height:50%;width:100%;position:absolute;z-index:999"
      @click="activeVideoShow(video.id)"></div>

1.5##### Konvertieren Sie das Klickereignis des aktuellen Videos: Verwenden Sie die ID, um festzustellen, welches gerade angeklickt wird

activeVideoShow(id){
  this.videos.filter(item=>{
     if(id == item.id){
      this.activeVideo=item
     }
    })
  }

Methode 2 : Referenz zum Vue-Video-Player-Plug-In (keine Videoliste)

Im Vergleich zur Iframe-Methode zum Schreiben einer Reihe von Divs und Stilen ist der Vue-Video-Player einfach optimiert, um loszulegen

2.1#### #Dies ist das erste Mal, dass ich dieses Plug-in verwende. Es ist nicht sehr vertraut, daher habe ich eine VideoPlayer-Komponente geschrieben, die auf der offiziellen API basiert. Der Code lautet wie folgt:

<div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>

2.1-1##### Sie müssen video.js einführen und zugehörige Optionen definieren

import videojs from 'video.js'
---------------------------------
props:{
    options:{
      type:Object,
      default(){
        return{
        }
      }
    }
  },
data(){
    return{
      player:null
    }
  },
mounted(){
    this.player=videojs(this.$refs.videoPlayer,this.options,function onPlayerReady(){
      console.log('onPlayerReady',this)
    })
  }

2.3#####Plug-ins, die eingeführt werden müssen

<video-player class="video-player vjs-custom-skin "
    ref="videoPlayer"
    :playsinline=&#39;false&#39;
    :options=&#39;videoOptions&#39;
    @play="onPlayerPlay($event)"
    @pause=&#39;onPlayerPause($event)&#39;
    @statechagned=&#39;playerStateChanged($event)&#39;
    >
    </video-player>

2.3- 1##### Relevante Daten definieren

import './../../node_modules/video.js/dist/video-js.css'
import './../../node_modules/vue-video-player/src/custom-theme.css'
import videojs from 'video.js'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'
import VideoPlayer from '@/components/videoPlayer.vue'

Code-Adresse: https: //github.com/yinglichen/videoPlayer

ps: Ich habe eine Untertitelfunktion mit Canvas geschrieben, die noch repariert werden muss und später hinzugefügt wird.

Empfohlen: „

Die neueste Auswahl von 5 vue.js-Video-Tutorials

“

Das obige ist der detaillierte Inhalt vonSo fügen Sie Videos in VueJS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!