H5的音视频播放器 —— MediaElement.js
编辑于 2022-06-10 11:10:56 阅读 1420
首先，只需嵌入<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();