jquery设置video的宽度_使用jQuery和CSS自定义HTML5 Video 控件 简单适用
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.
实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!
HTML5 Video 基础标签
1
2
3
4
5
Your browser does not support the video tag.
6
video标签最好包含mp4、webM和ogg这三种源视频文件-可以跨浏览器。如果浏览器不支持html5，你可以使用flash作为后备！
开始制作 HTML5 Video Controls
幸运的是HTML5 Video 的Api可以用JavaScript访问,并使用他们来作为控制视频的媒介.
在编码之前让我简单的介绍一下jQuery是如何获取video标签的.
在JavaScript中我们使用getElementById('videoID')来获取Video标签,作为结果,我们会获取到一个Dom对象.但是这不是等价的jQuery对象.$("videoID")会返回一个jQuery对象.不是Dom对象.这就是为什么在将其转换为Dom对象之前我们不能直接使用jQuery选择器调用/使用Html5 Video的Dom属性和功能.
1 //return a DOM object
2 var video = document.getElementById('videoID'); //or
3 var video = $('#videoID').get(0); //or
4 var video = $('#videoID')[0];5
6 //return a jQuery object
7 var video = $('#videoID');
Video Play/Pause Controls 播放/暂停 按钮
好的,这是所有的介绍.现在让我们来编码.首先,我们要创建一个简单的播放/暂停按钮.
1
2 Play/Pause
3
jquery设置video的宽度_使用jQuery和CSS自定义HTML5 Video 控件 简单适用相关推荐
- 使用jQuery和CSS自定义HTML5 Video 控件
http://www.cnblogs.com/lucker/archive/2013/03/01/2939163.html Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本 ...
- splitpane如何设置竖条的宽度_如何用 CSS 画三角形和箭头
三角形和箭头这两个图标在网页中经常会用到,例如:下拉选择框.排序.返回到上一页.导航条,分页都会用到三角形或者箭头,当然是用图片的方式的确可以实现这一样式,但是是用图片如果调整颜色那就比较困难了,除非 ...
- css动画设置渐进渐出_具有srcset和CSS动画的渐进增强灯箱
css动画设置渐进渐出 An earlier article on this site demonstrated how to use the HTML5 <dialog> element ...
- access字段属性设置下拉列表_可嵌入您系统的.NET 报表控件ActiveReports：带状列表组件...
葡萄城报表控件ActiveReports V14.0 全面支持 .NET Core平台.同时 ActiveReports的桌面报表设计器UI也全面增强,报表预览方式得以全面优化,报表设计能力得以大幅提 ...
- dev 报表设计器 怎么设置每页10行_可嵌入您系统的.NET 报表控件ActiveReports：带状列表组件...
葡萄城报表控件ActiveReports V14.0 全面支持 .NET Core平台.同时 ActiveReports的桌面报表设计器UI也全面增强,报表预览方式得以全面优化,报表设计能力得以大幅提 ...
- c# groupbox大小_【已解决】C#中使得控件随着WinForm窗体的大小改变而自动变化
[问题] 想要使得一个C#中的一个窗体中的控件,DataGridView,自动随着WinForm窗体变化而变化,即: 中的显示数据的灰色部分, 另外还有上面那个"2.actions" ...
- python 控件类多个实例_Python笔记_第四篇_高阶编程_GUI编程之Tkinter_2.控件类
1. Label控件: 说明:标签控件,可显示文本 图示1: 实例1: import tkinter # 创建主窗口__编程头部 win=tkinter.Tk() # 设置标题 win.title(& ...
- Qt Designer设置背景图片、颜色不影响其它组件小技巧，控件层级设置，组件的继承，styleSheet设置样式。
话不多说,先看效果图,完美的设置背景. 如果正常设置背景的话其它的组件都会产生变化. 这是因为组件的继承. 最开始的面板就是父类,我们新增加的组件就是子类,默认都是继承的. 继承也有继承的好处. 比如 ...
- 把combobox控件添加到datagridview控件中_自定义系列：控件属性添加
本文讲述如何在布局文件中添加原本所不具备的属性,以PagerTabStrip控件为例,增加textColor与textSize属性. 一.属性声明 新建res/values下的attrs.xml文件( ...
最新文章
- Linux 的多线程编程的高效开发经验
- 5.1 代价函数-机器学习笔记-斯坦福吴恩达教授
- 十图详解TensorFlow数据读取机制（附代码）
- VS2017读取ini 文件中文乱码
- 树莓派hdmi输出没声音_树莓派 4 开箱记
- Redis 文档阅读笔记 (一)
- Module build failed (from ./node_modules/babel-loader/lib/index.js) 错误解决
- Firefox浏览器常见问题开讲
- 静态连接和动态链接有什么区别？
- java上传excel文件代码,求java把上传文件的excel表中数据存入数据库中.实现录入的代码？...
- 正确加载 Javascript 和 CSS 到 WordPress
- 经典排序算法-MFC实现之2：问题
- tomcat出现5个using_下肢深静脉血栓要警惕，出现这5个症状，马上看医生
- python和java选择哪个-JAVA和Python哪个好就业？
- 物联网架构成长之路(22)-Docker练习之Etcd服务搭建
- poj 2559 Largest Rectangle in a Histogram dp！！！
- Python 类和实例
- 编译原理——将代码翻译成四元式序列
- python——文档字符串
- Spark四大组件包括Spark Streaming、Spark SQL、Spark MLlib和Spark GraphX。