Web网页使用html 5 ＜video＞ 标签播放视频（兼容主流浏览器）

如题：使用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