MuiPlayer-H5視頻播放器框架試用
我使用的是 npm 安裝，在命令提示符下輸入：
npm i mui-player --save
文件很小，幾秒之內就能下載完畢
之后就可以進行使用，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Player</title>
<!-- 引入基礎樣式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="https://muiplayer.js.org/css/mui-player.min.css" />
<!-- 引入基礎腳本 mui-player.min.js -->
<script type="text/javascript" src="https://muiplayer.js.org/js/mui-player.min.js"></script>
<!-- 引入桌面拓展 -->
<script type="text/javascript" src="https://muiplayer.js.org/js/mui-player-desktop-plugin.min.js"></script>
</head>
<body>
<center><h1>Video</h1></center>
<!-- 指定播放器容器 -->
<div align="center"> <div id="mui-player"></div></div>
<script>
// 初始化 MuiPlayer 插件，MuiPlayer 方法傳遞一個對象，該對象包括所有插件的配置
var mp = new MuiPlayer({
container: '#mui-player',
title: '演示視頻',
src: 'https://assets.mixkit.co/videos/preview/mixkit-stars-in-space-1610-large.mp4',
loop:true,
width:'500px',
height:'300px',
dragSpotShape:'square',
themeColor:'#3CB371',
plugins:[
new MuiPlayerDesktopPlugin({
})
],
});
</script>
</body>
</html>
最終結果如下：
ps：只是我代碼中附上的視頻沒有聲音的，這部分的功能沒有問題。
除此之外還支持畫中畫、循環播放、倍速播放、網頁全屏以及全屏功能。
同時還支持多種自定義修改，原參考文檔鏈接：https://muiplayer.js.org/zh/guide/
另外，附上一個免費的視頻素材網站：https://mixkit.co/free-stock-video/discover