设置html5标签头
<!DOCTYPE html>
<html lang="en">
视频
<video id="media" style="width: 100%;height:400px;" controls>
<source src="${pageContext.request.contextPath}/file/video/${fileName}">
</video>
音频
<audio id="media" controls>
<source src="${pageContext.request.contextPath}/file/audio/${fileName}"/>
</audio>
Js控制播放和暂停
var media = $("#media");
if(media[0].paused) {
media[0].play();
}
else {
media[0].pause();
}
监听播放和暂停事件
$(document).ready(function(){
var media = $("#media");
media[0].onplay = function(){
$("#switch1").attr("src","${pageContext.request.contextPath}/style/images/0ff1.png");
};
media[0].onpause = function(){
$("#switch1").attr("src","${pageContext.request.contextPath}/style/images/ON0.png");
};
});
示例效果
