大家好，我是前端實驗室的大師兄!

今天大師兄給大家推薦一款非常優(yōu)秀的視頻播放組件

image

效果欣賞

image

介紹

Vue-CoreVideoPlayer 一款基于vue.js的輕量級的視頻播放器插件。</br>
采用Adobd XD進行UI設計，支持移動端適配,不僅功能強大，顏值也是超一流！

Vue-CoreVideoPlayer的說明文檔和sample都很完善，上手十分容易。

該組件也保持了和原生HTML Video屬性配置的對接，可定制性很高。

image

播放器的UI設計基于Adobe XD，官方也提供了基于Adobe XD的UI設計源文件，可供開發(fā)者和設計師們二次創(chuàng)作自定義播放器UI。

image

特性

• 支持個性化配置，可定制播放器主題界面
• 支持i18n（國際化），默認支持中文、英文和日文
• 支持服務端渲染
• 支持畫中畫模式
• 支持事件訂閱
• 優(yōu)秀的API設計，易于開發(fā)
• 移動端適配
• 提供playcore-hls解碼插件，支持HLS直播流格式播放

快速上手

1.下載依賴

使用NPM

$ npm install --save vue-core-video-player 

使用yarn

$ yarn add -S vue-core-video-player 

直接引入

<script src="./dist/vue-core-vide-player.umd.min.js"></script>

2.引入模塊

編輯 main.js 然后引入模塊

import VueCoreVideoPlayer from 'vue-core-video-player'

Vue.use(VueCoreVideoPlayer)

3.播放組件使用

<div id="app">
    <div class="player-container">
        <vue-core-video-player  :src="videoSource" :cover="cover" :title= "title"  autoplay loop="true"/>
    </div>
</div>

上面我們說到VueCoreVideoPlayer組件保持了和原生HTML Video屬性配置的對接，可以看到大師兄在這里使用了autoplay和loop屬性，其他屬性也是一樣的使用方式哦~

這樣一個簡單的播放器就已經(jīng)集成完啦~

4.基本配置

設置視頻源，這里Sample大師兄使用了多分辨率作為效果展示。

<script>
    export default {
        name: 'app',
        data() {
            return {
                videoSource: [{
                    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',
                    resolution: 360,
                }, {
                    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
                    resolution: 720,
                }, {
                    src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
                    resolution: 1080
                }],
                cover : "https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png",
                title : "你的名字"
            }
        }
    }
</script>

如果是使用一個視頻文件的相對地址或者你的CDN地址方式：

<vue-core-video-player src="https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"/>

5.事件訂閱

VueCoreVideoPlayer遵循W3C標準的媒體事件API,你可以前往MDN獲取這些細節(jié)，下面羅列一些非常常用的事件：

• play 表示當播放器開始播放或者通過 play() 方法從暫停狀態(tài)恢復。
• pause 當播放器停止播放的時候觸發(fā)。
• progress 當播放器正在下載媒體資源。
• loadeddata 當播放器開始加載第一幀時候觸發(fā)。
• canplay 當加載足夠數(shù)據(jù)可以滿足基本播放后觸發(fā).。
• durationchange 當媒體獲取一定數(shù)據(jù)，并且完整的解析出 metadata 信息。
• ended 當媒體播放結束時候觸發(fā)。
• timeupdate 當播放的媒體 currenttime 發(fā)生改變時候觸發(fā)。
• seeked 當用戶 seek 操作完成觸發(fā)。

methods: {
    paly() {
        console.log("play");
    },
    pause(){
        console.log("pause");
    }
}

作為一款優(yōu)秀的現(xiàn)代視頻播放組件，別忘了VueCoreVideoPlayer還支持i18n（國際化），默認支持中文、英文和日文；同時還提供了一款HLS解碼插件playcore-hls支持HLS的播放，更多的功能及使用大家自己可以去實踐一下！

VueCoreVideoPlayer已經(jīng)在Github上開源，同時大師兄已經(jīng)將Sample的代碼上傳到Github,大家在回復播放器即可獲取相關的學習資源哦~

進了前端門，便是一家人
原創(chuàng)不易,點贊、留言、分享就是大師兄寫下去的動力!