<c:forEach items="${recordFilesList}" var="recordFile" varStatus="s" >
<video id="videoPlay${recordFile.id}" width="420px;" height="35x" src="${recordFile.urlPrefix}${recordFile.recordFileName}"
poster="banner.png" loop="loop" x-webkit-airplay="true" webkit-playsinline="true" controls="controls " >
您的浏览器暂不支持播放该视频,请升级至最新版浏览器。
</video>
</c:forEach>
不能出来就是某个属性没写吧,前端不详细研究了,能出来就行,如果想做到点击播放其中一个自动暂停其它可循环video来做,以下代码未实测,只记录一个思路
<script type="text/javascript">
// 获取所有audios
var audios = document.getElementsByTagName("audio");
// 暂停函数
function pauseAll() {
var self = this;
[].forEach.call(audios, function(i) {
// 将audios中其他的audio全部暂停
i !== self && i.pause();
})
}
// 给play事件绑定暂停函数
[].forEach.call(audios, function(i) {
i.addEventListener("play", pauseAll.bind(i));
})
// 视频点击播放/暂停
var videoAll = $(".J_catVideo");
videoAll.on("click",function(){
var cindex = videoAll.index(this);
videoAll.each(function (i) {
var video = $(this).find('video')[0];
if (i == cindex) {
if (video.paused) {
$(this).find(".J_videoPic").hide();
video.play();
} else {
$(this).find(".J_videoPic").show();
video.pause();
}
}else{
if (!video.paused) {
$(this).find(".J_videoPic").show();
video.pause();
}
}
})
})
</script>