一个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 add event remove event
Apr 07 Javascript
JavaScript继承方式实例
Oct 29 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
js预加载图片方法汇总
Jun 15 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
layui选项卡效果实现代码
May 19 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 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内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
《最可爱的人》教学反思
2014/02/14 职场文书
保险专业求职信
2014/07/07 职场文书
2015年元旦标语大全
2014/12/09 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
收入证明怎么写
2015/06/12 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android