Video (audio) playback component – watermelon player

Install

npm install xgplayer

use

< template > 
  < div > 
    <!-- video component position --> 
    < div  id = "video" > </ div > 
  </ div > 
</ template >

< script  lang = "ts" > import { defineComponent, onMounted } from "vue" ;
 //Video playback component import Player from "xgplayer" ;
 export default defineComponent({


  setup() {
    onMounted( () => {
       //Create a player object 
      new Player({
         id : "video" ,
         //Video address 
        url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/ xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4" ,
         //size 
        width: 600 ,
         height : 340 ,
         //player volume 
        volume: 0.6 ,
         //play image
        poster:
          "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg" ,
         //Pass in an optional array of double speed 
        playbackRate: [ 0.5 , 1 , 1.5 , 2 ],
      });
    });
  },
});
</script>

<style scoped lang="scss">
</style>

Effect

For more information, see the official documentation: Watermelon Player

Leave a Comment

Your email address will not be published. Required fields are marked *