H5的音视频播放器 —— MediaElement.js
H5的音视频播放器 —— MediaElement.js
崔哥
发布于 2022-06-12 17:06:58
发布于 2022-06-12 17:06:58
代码可运行
运行总次数：0
代码可运行
首先，只需嵌入<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();参考
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
