如题:使用html5 的 <video>标签 播放视频。
环境:前段采用EasyUi框架,在弹出的dialog中嵌入video播放视频
注意事项:
html5的video标签支持的视频格式:
一共支持三种格式: Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
而我要做的是让其兼容主流的浏览器:如火狐,ie,chrom,360等。这个时候就要引入第三方js
直接看核心代码:
<%@ page pageEncoding="UTF-8" %>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/video.css">
<%--视频弹出框--%>
<div id="helpDialog_menue" style="padding:0px;display:none; overflow: auto;top: 0px;">
<div class="video-wrap">
<div class="video-box">
<video controls="controls" id="videoId" preload="auto">
<source id="video_source" src="" type="video/mp4">
<p style="padding: 50px;color:#fff;text-align: center">您的浏览器不支持 HTML5 video 标签。</p>
</video>
</div>
</div>
</div>
video.css
/*视频样式*/
.video-wrap {
background-color: #ddd;
width: 100%;
text-align: center;
}
.video-box {
width: 100%;
margin: 0px auto;
}
@media (max-width: 1024px) {
video {
height: 430px;
}
#helpDialog_menue {
width: 610px;
height: 440px;
}
}
@media (min-width: 1024px) {
#helpDialog_menue {
width: 1015px;
height: 730px;
}
}
js代码
/**
* 显示帮助视频
* @param type 根据type传值不同,定位不同视频地址
*/
function showHelpVideo(type){
var videoUrl = getAppUrl()+"/resources/video/cjzd.mp4";
if(type == '1'){
videoUrl = getAppUrl()+"/resources/video/cjzd.mp4";
}else if(type == '2'){
}
var myVideo = document.getElementsByTagName('video')[0];
myVideo.setAttribute("src", videoUrl);
$("#helpDialog_menue").show().dialog({
modal: true,
title: '帮助示例',
onClose:function () {
myVideo.currentTime = 0;//从头开始
myVideo.pause();//暂停
}
});
}
记得在前段video界面中引入js文件html5media.js文件、
下载地址:https://download.csdn.net/download/yyj108317/12753566
video标签的各属性如下表
增补:
这里会有个问题,如果你要让视频持续缓冲,也就是在视频页面出来后,不管播放与否,都要后台开始缓冲,那么可以参考网上的另一个文章:
https://blog.csdn.net/weixin_33973600/article/details/88909935