一个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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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
967 个函式
2006/10/09 PHP
ASP知识讲座四
2006/10/09 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
js分页代码分享
2014/04/28 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python中条件判断语句的简单使用方法
2015/08/21 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python 中random模块的常用方法总结
2017/07/08 Python
python正则表达式面试题解答
2020/04/28 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Python流程控制语句的深入讲解
2020/06/15 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
任命书模板
2014/06/04 职场文书
教师业务学习材料
2014/12/16 职场文书
婚礼新人答谢词
2015/01/04 职场文书
员工离职感谢信
2015/01/22 职场文书