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


Posted in Javascript onMay 08, 2014
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 
<body> <div id="divVideo"></div> 
//因js水平有限,不喜勿喷,全当没事看看,video是html5中的新控件,大家可以看看 
<script type="text/javascript"> 
//mp4是ios、android普遍支持的格式 
function playVideo(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时循环播放) 
var str = "<video id='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 += " <source src='" + _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>
Javascript 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
javascript事件模型实例分析
Jan 30 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
js 设置缓存及获取设置的缓存
May 08 #Javascript
javascript实现的一个带下拉框功能的文本框
May 08 #Javascript
javascript解析json数据的3种方式
May 08 #Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 #Javascript
JS获取随机数函数可自定义最小值最大值
May 08 #Javascript
js数组操作常用方法
May 08 #Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 #Javascript
You might like
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python制作词云的方法
2018/01/03 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
Python的条件锁与事件共享详解
2019/09/12 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
异常和异常类的概念
2014/09/12 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
英文简历中的自我评价
2013/10/06 职场文书
护士长竞聘书
2014/03/31 职场文书
婚前协议书标准版
2014/10/19 职场文书
2014年标准化工作总结
2014/12/17 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android