html5如何实现视频播放-创新互联

这篇文章主要为大家展示了“html5如何实现视频播放”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“html5如何实现视频播放”这篇文章吧。

目前创新互联已为1000+的企业提供了网站建设、域名、网络空间、网站托管维护、企业网站设计、鹿泉网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、html5技术优势
1 关于视频不用插件播放，点击就能看
2 跨平台、好升级、好维护，开发成本相对原生APP低很多
3 对移动的良好支持，支持手势，本地存储和视频续播等，通过H5就可以把自己的网站移动化。
4 更为简洁的代码，更好的交互
5 支持游戏开发
二、html5播放视频
pc端还是用flash播放，但移动端通过html5方式来做。
而html5的video标签只支持mp4、webm、ogg三种格式.目前所有主流浏览器新版本都支持html5（除了Opera）
H.264已经占领视频市场的80%。如果移动应用视频，建议编译成264格式，有好的高压缩比、高画质。
H.264则是由两个组织联合组建的联合视频组（JVT）共同制定的新数字视频编码标准，它既是ITU-T的H.264，又是ISO/IEC的MPEG-4高级视频编码（Advanced Video Coding，AVC）的第10 部分。因此，不论是MPEG-4 AVC、MPEG-4 Part 10，还是ISO/IEC 14496-10，都是指H.264。
三、html5代码DEMO

    
    
    
    
    
     

function browserRedirect() {
var sUserAgent= navigator.userAgent.toLowerCase();
var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp= sUserAgent.match(/midp/i) == "midp";
var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid= sUserAgent.match(/android/i) == "android";
var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
 
 
if(bIsAndroid){
document.getElementById("a").style.display="block";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
document.getElementById("d").style.display="none";
}
else if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM) {
document.getElementById("b").style.display="block";
document.getElementById("d").style.display="none";
document.getElementById("a").style.display="none";
document.getElementById("c").style.display="none";
} else if(bIsIpad) {
document.getElementById("c").style.display="block";
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("d").style.display="none";
 
}
else {
document.getElementById("d").style.display="block";
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
 
}
}
window.onload=function(){browserRedirect();}
 
    $(document).ready(
                function(){
                    var ps=new jsPlayer("700","500","myVideo");
                }
        );

 
     




这是安卓手机