| Web网页使用html 5 ＜video＞ 标签播放视频（兼容主流浏览器） | 您所在的位置：网站首页 › 网页视频格式不支持 › Web网页使用html 5 ＜video＞ 标签播放视频（兼容主流浏览器） |
Web网页使用html 5 ＜video＞ 标签播放视频（兼容主流浏览器）
|
如题：使用html5 的 标签 播放视频。 环境：前段采用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
直接看核心代码： 您的浏览器不支持 HTML5 video 标签。 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 |
【本文地址】
公司简介
联系我们