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

本是古典何须时尚 2022-12-01 09:57 363阅读 0赞

如题：使用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][https_download.csdn.net_download_yyj108317_12753566]

video标签的各属性如下表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70][]

--------------------

增补：

这里会有个问题，如果你要让视频持续缓冲，也就是在视频页面出来后，不管播放与否，都要后台开始缓冲，那么可以参考网上的另一个文章：

[https://blog.csdn.net/weixin\_33973600/article/details/88909935][https_blog.csdn.net_weixin_33973600_article_details_88909935]

[https_download.csdn.net_download_yyj108317_12753566]: https://download.csdn.net/download/yyj108317/12753566
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70]: /images/20221123/453508578ad342059a8fd26fd2e23f90.png
[https_blog.csdn.net_weixin_33973600_article_details_88909935]: https://blog.csdn.net/weixin_33973600/article/details/88909935