一个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动态调整iframe高度的代码
Apr 10 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
javascript 特性检测并非浏览器检测
Jan 15 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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 SQL防注入代码集合
2008/04/25 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
自制PHP框架之设计模式
2017/05/07 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
JS 自执行函数原理及用法
2019/08/05 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
Python多线程编程简单介绍
2015/04/13 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
基于Python os模块常用命令介绍
2017/11/03 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python爬取指定微信公众号文章
2018/12/20 Python
django 自定义过滤器的实现
2019/02/26 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
python实现logistic分类算法代码
2020/02/28 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
秋季运动会广播稿
2014/02/22 职场文书
搞笑征婚广告词
2014/03/17 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL