Vue CoreVideoPlayer 一款基于 vue.js 的輕量級、優秀的視頻播放器組件

大家好,我是程序視點的小二哥!今天小二哥給大家推薦一款非常優秀的視頻播放組件
Vue CoreVideoPlayer

效果欣賞

Vue CoreVideoPlayer

介紹

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

Vue-CoreVideoPlayer說明文檔sample都很完善,上手十分容易。該組件也保持了和原生HTML Video屬性配置的對接,可定制性很高。

播放器的UI設計基于Adobe XD,官方也提供了基于Adobe XD的UI設計源文件,可供開發者和設計師們二次創作自定義播放器UI。

特性

  • 支持個性化配置,可定制播放器主題界面
  • 支持i18n(國際化),默認支持中文、英文和日文
  • 支持服務端渲染
  • 支持畫中畫模式
  • 支持事件訂閱
  • 優秀的API設計,易于開發
  • 移動端適配
  • 提供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屬性配置的對接,可以看到小二哥在這里使用了autoplayloop屬性,其他屬性也是一樣的使用方式哦~這樣一個簡單的播放器就已經集成完啦~

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獲取這些細節,下面羅列一些非常常用的事件:

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

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

VueCoreVideoPlayer已經在Github上開源,大家可以自行獲取相關的學習資源哦~

https://core-player.github.io/vue-core-video-player/zh/

如果你用VUE做開發,那就趕緊試試吧!如文章對你有所幫助,別忘了點贊、留言、分享哦!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/42330.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/42330.shtml
英文地址,請注明出處:http://en.pswp.cn/web/42330.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

第一次構建一個對話機器人流程解析(二)

1. 問答機器人的組成-基于知識圖譜的搜索 在教育場景下&#xff0c;若學生有關于學習內容的提問&#xff0c;或業務層面的提問&#xff0c;則要求問答機器人的回答必須精準&#xff0c;來滿足業務的要求因此需要通過知識圖譜來快速檢索&#xff0c;所提內容的相關信息&#xf…

數字系統與進制轉換

數字系統 數字邏輯是計算機科學的基礎&#xff0c;它研究的是如何通過邏輯門電路&#xff08;與門、或門、非門等&#xff09;實現各種邏輯功能。數字系統則是由數字邏輯電路組成的系統&#xff0c;可以實現各種復雜的運算和控制功能。在計算機科學中&#xff0c;數字邏輯和數…

C++ 假設今天是星期日,那么過a^b天之后是星期幾?

題目 假設今天是星期日&#xff0c;那么過a^b天之后是星期幾&#xff1f; 【輸入】 兩個正整數a&#xff0c;b&#xff0c;中間用單個空格隔開。0<a≤100,0<b≤10000。 【輸出】 一個字符串&#xff0c;代表過a^b天之后是星期幾。 其中&#xff0c;Monday是星期一&…

自定義波形圖View,LayoutInflater動態加載控件保存為本地圖片

效果圖: 頁面布局: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="…

C#多線程并行計算實例

在C#中實現多線程并行計算可以通過使用 Task 和 Parallel 類來實現。這里給出兩個簡單的示例&#xff0c;一個是使用 Task&#xff0c;另一個是使用 Parallel.ForEach。 使用 Task 進行多線程并行計算 using System; using System.Threading.Tasks;class Program {static voi…

Kubernetes基于helm部署jenkins

Kubernetes基于helm安裝jenkins jenkins支持war包、docker鏡像、系統安裝包、helm安裝等。在Kubernetes上使用Helm安裝Jenkins可以簡化安裝和管理Jenkins的過程。同時借助Kubernetes&#xff0c;jenkins可以實現工作節點的動態調用伸縮&#xff0c;更好的提高資源利用率。通過…

MySQL Innodb存儲引擎中,當頁默認的大小是16K時,頁中最多存放多少行的記錄?

1、題目引入 Innodb存儲引擎是面向行的(row-oriented)&#xff0c;也就是說數據的存放按行進行&#xff0c;每頁存放的行記錄是有硬性定義的&#xff0c;當頁默認的大小是16K時&#xff0c;頁中最多存放多少行的記錄&#xff1f; A、1600 行B、8192 行C、16383 行D、7992 行 …

基于Python協同過濾的旅游景點推薦系統,采用Django框架,MySQL數據存儲,Bootstrap前端,echarts可視化實現

隨著旅游業的迅速發展&#xff0c;個性化旅游推薦系統成為提升用戶體驗和促進旅游市場增長的重要工具。本研究旨在設計并實現一種基于Python協同過濾的旅游景點推薦系統&#xff0c;結合Django框架、MySQL數據庫存儲、Bootstrap前端框架以及echarts數據可視化技術&#xff0c;為…

Flask發布一個及時止損(止盈)服務(二)

生成可視化的止盈止損結果&#xff08;圖片&#xff09; 媽的&#xff0c;還是得用 akshare&#xff0c;還需要指定python版本3.9以上 conda remove -n fonxsys --all conda search pythonconda create -n fonxsys python3.9 conda activate fonxsys python.exe -m pip insta…

【粉絲福利 | 第8期】值得收藏!推薦10個好用的數據血緣工具

?? 寫在前面參與規則&#xff01;&#xff01;&#xff01; ?參與方式&#xff1a;關注博主、點贊、收藏、評論&#xff0c;任意評論&#xff08;每人最多評論三次&#xff09; ??本次送書1~4本【取決于閱讀量&#xff0c;閱讀量越多&#xff0c;送的越多】 目前市面上絕…

數據遷移探索

概念 數據遷移是指將數據從一個計算環境或存儲系統移動到另一個計算環境或存儲系統。 隨著公司業務的發展&#xff0c;出于成本優化、系統升級、分庫分表、整合數據等原因。數據遷移工作在日常工作中會陸續出現。 我們可以將數據遷移分成兩個部分&#xff0c;第一部分是數據…

springboot高職院校畢業生信息管理系統-計算機畢業設計源碼27889

摘 要 基于Java語言開發的高職院校畢業生信息管理系統旨在提供一個便捷、高效的方式來管理畢業生的相關信息。系統包括學生基本信息管理、成績管理、就業信息管理等模塊&#xff0c;通過界面友好、操作簡單的設計&#xff0c;方便管理員快速查詢和更新學生信息。系統還提供數據…

采用前后端分離技術架構+java語言開發的全套產科信息管理系統源碼 可與醫院HIS、LIS、PACS、RIS等系統進行對接

采用前后端分離技術架構java語言開發的全套產科信息管理系統源碼 可與醫院HIS、LIS、PACS、RIS等系統進行對接 什么是產科信息管理系統-建檔管理&#xff1f; 產科信息管理系統建檔管理通過信息技術實現了孕產婦健康信息的電子化、網絡化和智能化管理&#xff0c;提高了醫療服…

Riscv 架構的合規測試

為啥直接關注riscv-arch-test&#xff0c;是因為RISCOF 測試框架使用的是riscv-arch-test 1. The architectural test 架構測試是一個單一的測試&#xff0c;代表了可編譯和運行的最小測試代碼。它是用匯編代碼編寫的&#xff0c;其產品是test signature。一個架構測試可能由…

微信小程序推送消息java版

需求背景 使用springboot2微信小程序推送消息。百度了一下看了一篇文章整體還可以&#xff0c;這里推薦一下。 教程解析 1、微信平臺開通訂閱消息。 2、添加模板。 3、springboot后臺接口開發 微信平臺驗證地址接口開發&#xff0c;然后部署到公網服務器。 4、微信平臺驗…

基于FPGA的數字信號處理(15)--定點數的舍入模式(6)向0取整fix

前言 在之前的文章介紹了定點數為什么需要舍入和幾種常見的舍入模式。今天我們再來看看另外一種舍入模式&#xff1a;向上取整fix。 10進制數的fix fix&#xff1a;也叫 向0取整。它的舍入方式是數據往0的方向&#xff0c;舍入到最近的整數&#xff0c;比如1.75 fix到2&#xf…

Docker技術簡介

Docker是一種開源的容器化平臺&#xff0c;旨在簡化應用程序的創建、部署和運行過程。它通過將應用程序及其所有依賴項打包到一個稱為容器的可移植單元中來實現這一目標。以下是Docker技術的簡介&#xff1a; Docker的核心概念 1、容器&#xff08;Container&#xff09;&…

將WordPress的文章重新排序的3個方法

有效的調整文章顯示順序看開可以更好突出內容&#xff0c;還可以保持網站的新鮮感&#xff0c;今天我將帶您了解三種方法&#xff0c;通過重新排序文章顯著提升網站的吸引力。我們將逐步講解從調整設置到使用插件以及“置頂”文章的每一種方法&#xff0c;確保WordPress 新手也…

Linux將mysql導出

1、基礎導出 要在Linux系統中將MySQL數據庫導出&#xff0c;通常使用mysqldump命令行工具。以下是一個基本的命令示例&#xff0c;用于導出整個數據庫&#xff1a; mysqldump -u username -p database_name > export_filename.sql 其中&#xff1a; username 是你的MySQL用…

利用python進行數據分析 —— python正則表達式(持續更新中!)

文章目錄 利用python進行數據分析 —— python基礎知識進階重點筆記&#xff1a;正則表達式re.match 匹配開頭re.search 全文匹配re.sub 替換刪除re.compile 編譯正則findall 返回列表finditer 返回迭代器re.split 分割返回列表(?P...) 分組匹配正則表達符號、修飾符通配符1 ^…