H5视频播放器属性与API控件，以及对程序的解释
一：理论
1.视频播放器的格式介绍
视频主要有三部分组成：视频、音频、编码格式
视频格式：avi、rmb、wmv、mpeg4、ogg、webm
2.H5的标签video的简单使用
<video src="abc.mp4" controls="controls"></video>
或者：
<video width="300" controls="controls">
<source src="abc.mp4" type="video/mp4">
<source src="abc.ogg" type="video/ogg">
</video>
3.video的属性
二：Demo
1.程序代码
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>PHP100 HTML5视频教程-视频播放功能</title>
<script src="D:\jquery\jquery-1.12.4.min.js">
</script>
<script>
$(document).ready(function(){
var video = $('#php100');
$("#play").click(function(){ video[0].play(); });
$("#pause").click(function(){ video[0].pause(); });
$("#go10").click(function(){ video[0].currentTime+=10; });
$("#back10").click(function(){ video[0].currentTime-=10; });
$("#rate1").click(function(){ video[0].playbackRate+=2; });
$("#rate0").click(function(){ video[0].playbackRate-=2; });
$("#volume1").click(function(){ video[0].volume+=0.1; });
$("#volume0").click(function(){ video[0].volume-=0.1; });
$("#muted1").click(function(){ video[0].muted=true; });
$("#muted0").click(function(){ video[0].muted=false; });
$("#full").click(function(){
video[0].webkitEnterFullscreen(); // webkit类型的浏览器
video[0].mozRequestFullScreen(); // FireFox浏览器
});
});
</script>
</head> <video id="php100" controls="controls" preload="auto" poster="load.jpg" height="400">
<source src="video.webm" type="video/webM" />
<source src="video.ogv" type="video/ogg" />
<source src="php100-html5-22-1.mp4" type="video/mp4" />
你的浏览器不支持该播放器
</video> <hr>
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="go10">快进10秒</button>
<button id="back10">快退10秒</button>
<button id="rate1">播放速度+</button>
<button id="rate0">播放速度-</button>
<button id="volume1">声音+</button>
<button id="volume0">声音-</button>
<button id="muted1">静音</button>
<button id="muted0">解除静音</button>
<button id="full">全屏</button> </html>
2.效果
三：解释程序
1.关于$(document).ready(function(){}的解释
是页面一初始化的时候就调用这个方法，把需要执行的逻辑写在function方法体里
就是页面刚开始加载时就调用 相当于js中的 body标签的onload，在文档加载后激活函数。
这种方式是jquery框架，封装了浏览器对dom的操作。
如果我们在
$(document).ready(function(){
加入的内容
});
加入内容$(".btn-slide").click(function(){
alert("你单击了a标签中class等于btn-slide的连接");
});
则表示当我们单击class=btn-slide的超级连接时弹出“你单击了a标签中class等于btn-slide的连接”对话框.
2.常见的jquery写法如下：
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
$("#myId"); //(5)
第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为 上下文的table里面所有的连接元素。第五行代码得到id为myid的所有元素
3.获取video的对象方式
var video = $('#php100');
这是程序在js里写的程序，下面做一下解释。
第一种方式是js的原始写法。
第二种是jquery的方式，但是获取的是数组，要想使得对象可以使用，需要在获取数组的第一个元素。
4.视频对象的方法API
5.单击事件
获取id后，使用click获取单击函数。
至于函数，就是video数组里的第一个对象，使用其函数。
H5视频播放器属性与API控件，以及对程序的解释的更多相关文章
- IOS开发之XCode学习013：步进器和分栏控件
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.定义UIStepper和UISegmente ...
- 让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案
Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee ...
- .NET混合开发解决方案8 WinForm程序中通过设置固定版本运行时的BrowserExecutableFolder属性集成WebView2控件
系列目录 [已更新最新开发文章,点击查看详细] 在我的博客<.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件>中介绍了WinForm ...
- WPF 10天修炼 第六天- 系统属性和常用控件
WPF系统属性和常用控件 渐变的背景色 WPF中的前景色和背景色不同于传统Winform的设置,这些属性都是Brush类型的值.在XAML中,当为这些属性设置指定的颜色后将被转换为SolidColor ...
- Chimee - 简单易用的H5视频播放器解决方案
Chimee是由奇舞团开源的一套H5视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造.Chimee支持MP4.M3U8.FLV等多种媒体格式,同时它也帮我们解决了 ...
- UWP &WP8.1 依赖属性和用户控件 依赖属性简单使用 uwp添加UserControl
上面说 附加属性.这章节说依赖属性. 所谓依赖属性.白话讲就是添加一个公开的属性. 同样,依赖属性的用法和附加属性的用法差不多. 依赖属性是具有一个get,set的属性,以及反调函数. 首先是声明依赖 ...
- 演练：使用属性自定义 DataGrid 控件
演练:使用属性自定义 DataGrid 控件 Silverlight 此主题尚未评级 - 评价此主题 Silverlight DataGrid 控件支持常用表格式设置选项,例如交替显示不同的行 ...
- asp.net mvc中使用jquery H5省市县三级地区选择控件
地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...
- WPF 模仿 UltraEdit 文件查看器系列一 用户控件
WPF 模仿 UltraEdit 文件查看器系列一 用户控件 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-10 章节: 起步 添加用户控件 ...
随机推荐
- 【BZOJ1083】[SCOI2005]繁忙的都市（最小生成树）
[BZOJ1083][SCOI2005]繁忙的都市(最小生成树) 题面 BZOJ 洛谷 题解 模板题. #include<iostream> #include<cstdio> ...
- 手速太慢QAQ
显然D是个细节题,但是还剩1h时看眼榜还没人过EF,只好冷静写D,大概思路是任何时候如果min(n,m)<=2,max(n,m)<=4暴搜,否则直接贪心是很对的,即第一步让S.T长度平均化 ...
- c++函数写的都对，还是说incompatible或者not found的解决办法
vs2010,c++,定义了一个函数如下,在BianHuanYuDib.h文件中: 在BianHuanYuDib.cpp中: 写的完全正确,但还是会报错: 很明显,连std都报错了,一般不是真的有很大 ...
- Libre 6009 「网络流 24 题」软件补丁 / Luogu 2761 软件安装问题 （最短路径，位运算）
Libre 6009 「网络流 24 题」软件补丁 / Luogu 2761 软件安装问题 (最短路径,位运算) Description T 公司发现其研制的一个软件中有 n 个错误,随即为该软件发放 ...
- POJ 1847 Tram （最短路径）
POJ 1847 Tram (最短路径) Description Tram network in Zagreb consists of a number of intersections and ra ...
- 基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）
http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...
- 函数和常用模块【day06】：json模块（十一）
本节内容 1.dumps序列化和loads反序列化 2.dump序列化和load反序列化 3.序列函数 1.dumps序列化和loads反序列化 dumps()序列化 1 2 3 4 5 6 7 8 ...
- Java中多个异常的捕获顺序(多个catch)
import java.io.IOException; public class ExceptionTryCatchTest { public void doSomething() throws IO ...
- Codeforces 835E. The penguin's game
http://codeforces.com/problemset/problem/835/E 题意: 这是一道交互题 有n个数,其中有2个y,n-2个x 每次你可以询问若干个数的异或和,从而得出y的位 ...
- jQuery总结或者锋利的jQuery笔记二
第三章 jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) , 层次选择器(div ul),(div> ...