H5的音视频播放器 —— MediaElement.js

编辑于 2022-06-10 11:10 阅读 87

首先,只需嵌入<audio>标签或<video>标签就可以实现媒体播放器。但是这样在不同浏览器下呈现的效果会有差异,为了让每个浏览器下都有一致的效果,我们选择了MediaElement.js

mediaelement HTML5 audio and video players in pure HTML and CSS. MediaElementPlayer.js uses the same HTML/CSS for all players.

使用方法

简单的使用只需要引入两个文件,获取最新版本的文件

<script type="text/javascript" src="/static/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="/static/css/mediaelementplayer.min.css">

直接用他们的文件,几个图标可能显示不出来。打开mediaelement-and-player.min.js文件,找到mejs-controls.svg并将其替换为正确的路径,比如/static/images/mejs-controls.svg

在body中添加

<audio id="audioPlayer"></audio>

音频播放器

var player = new MediaElementPlayer('audioPlayer');
player.setSrc('sample.wav');
player.play();

视频播放器

var videoPlayer = new MediaElementPlayer('moviePlayer');
videoPlayer.setSrc('sample.mp4');
videoPlayer.play();

参考

https://techblog.recochoku.jp/8102

https://qiita.com/g-imai/items/dcc61f360703ed61cca7

广而告之,我的新作品《语音助手》上架Google Play了,欢迎下载体验