So fügen Sie Videos in VueJS hinzu-View.js-php.cn

So fügen Sie Videos in VueJS hinzu

藏色散人

Freigeben： 2021-11-01 14:47:20

Original

5585 Leute haben es durchsucht

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.

So fügen Sie Videos in VueJS hinzu

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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:&#39;test2&#39;,youtobeURL:&#39;http://player.youku.com/embed/XMzcwNTY3NTM2MA&#39;,speaker:&#39;harry&#39;, likes:101,views:0,describe:&#39;good&#39;
   },{
    id:2,title:&#39;test3&#39;,youtobeURL:&#39;http://player.youku.com/embed/XMzcwNTY3NTM2MA&#39;,speaker:&#39;harry&#39;, likes:100,views:75,describe:&#39;good&#39;
   }],
   activeVideo:{
    id:3,title:&#39;test1&#39;,thumbnail:&#39;./../../static/images/headImg.png&#39;,speaker:&#39;harry&#39;, likes:0,views:0,describe:&#39;good&#39;,
    youtobeURL:&#39;http://player.youku.com/embed/XMzcwNTY3NTM2MA&#39;
   }
  }
 }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

2.3- 1##### Relevante Daten definieren

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

Nach dem Login kopieren

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.