提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

一个html5播放视频的video控件只支持android的默认格式mp4和3gp

Androidhtml5 一个 支持 视频 格式 默认 控件
2023-06-13 09:15:26 时间
复制代码代码如下:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
</head>
<body>

<divid="divVideo"></div>

//因js水平有限，不喜勿喷，全当没事看看,video是html5中的新控件，大家可以看看

<scripttype="text/javascript">

//mp4是ios、android普遍支持的格式
functionplayVideo(opt){
if(typeof(opt)=="undefined"){
alert("请传入必要参数！");
return;
}
if(typeof(opt.elemt)=="undefined"){
alert("请指定播放器要插入的对象！");
return;
}
if(typeof(opt.src)=="undefined"){
alert("请指定要播放视频的路径！");
return;
}
var_this=this;
_this.elemt=opt.elemt;//播放器要插入的对象
_this.src=opt.src;//视频的URL(必设)
_this.width=opt.width>0?opt.width+"px":"100%";//宽度(默认100%)
_this.height=opt.height>0?opt.height+"px":"100%";//高度(默认100%)
_this.autoplay=opt.autoplay=="true"?"autoplay":"";//自动播放（true为自动播放）
_this.poster=opt.poster;//视频封面，播放时的封面图片
_this.preload=opt.preload=="true"?"preload":"";//预加载(true时启动加载)
_this.loop=opt.loop=="true"?"loop":"";//循环播放(true时循环播放)
varstr="<videoid="playVideo"controls";//根据设置的属性的值，拼写video控件
str+="width=""+_this.width+""height=""+_this.height+"""+_this.autoplay+""+_this.preload+""+_this.loop+"";
if(typeof(_this.poster)!="undefined"){
str+="poster=""+_this.poster+"">";
}else{
str+=">";
}
str+="<sourcesrc=""+_this.src+""/>";
str+="</video>";
this.elemt.innerHTML=str;//将str放到要插入的对象中
}
playVideo({
//所有参数，elemt和src为必填其他看需求怎么要求
//elemt为播放控件要插入的容器，src为视频文件地址，preload为预加载，autoplay是否页面进入就自动播放
//poster为播放前的遮照图片，loop为是否循环播放，width和heigth默认100%
elemt:document.getElementById("divVideo"),
src:"3.mp4",
preload:"true",
autoplay:"true",
poster:"",
loop:"true",
width:"",
heigth:""
});
</script>
</body>
</html>

相关文章