一：理论

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控件，以及对程序的解释的更多相关文章
	

    
								
  1. IOS开发之XCode学习013：步进器和分栏控件
		
    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能:  1.定义UIStepper和UISegmente ...
    
		
    2. 
						
  2. 让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案
		
    Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee  ...
    
		
    3. 
						
  3. .NET混合开发解决方案8 WinForm程序中通过设置固定版本运行时的BrowserExecutableFolder属性集成WebView2控件
		
    系列目录     [已更新最新开发文章,点击查看详细] 在我的博客<.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件>中介绍了WinForm ...
    
		
    4. 
						
  4. WPF 10天修炼 第六天- 系统属性和常用控件
		
    WPF系统属性和常用控件 渐变的背景色 WPF中的前景色和背景色不同于传统Winform的设置,这些属性都是Brush类型的值.在XAML中,当为这些属性设置指定的颜色后将被转换为SolidColor ...
    
		
    5. 
						
  5. Chimee - 简单易用的H5视频播放器解决方案
		
    Chimee是由奇舞团开源的一套H5视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造.Chimee支持MP4.M3U8.FLV等多种媒体格式,同时它也帮我们解决了 ...
    
		
    6. 
						
  6. UWP &WP8.1 依赖属性和用户控件 依赖属性简单使用 uwp添加UserControl
		
    上面说 附加属性.这章节说依赖属性. 所谓依赖属性.白话讲就是添加一个公开的属性. 同样,依赖属性的用法和附加属性的用法差不多. 依赖属性是具有一个get,set的属性,以及反调函数. 首先是声明依赖 ...
    
		
    7. 
						
  7. 演练：使用属性自定义 DataGrid 控件
		
    演练:使用属性自定义 DataGrid 控件 Silverlight   此主题尚未评级 - 评价此主题   Silverlight DataGrid 控件支持常用表格式设置选项,例如交替显示不同的行 ...
    
		
    8. 
						
  8. asp.net mvc中使用jquery H5省市县三级地区选择控件
		
    地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...
    
		
    9. 
						
  9. WPF 模仿 UltraEdit 文件查看器系列一 用户控件
		
    WPF 模仿 UltraEdit 文件查看器系列一 用户控件 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-10 章节: 起步 添加用户控件 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Effective Java -- 对于所有对象都通用的方法
			
    覆盖equb时请遵循通用约定: 自反性.对于任何非null的引用值x,xequals(x)必须返回true. 对称性.对于任何非null的引用值x和y,当且晋档y.equals(x)返回true的时候 ...
    
			
    2. 
						
  2. POJ 3259 Wormholes（最短路径，求负环）
			
    POJ 3259 Wormholes(最短路径,求负环) Description While exploring his many farms, Farmer John has discovered  ...
    
			
    3. 
						
  3. bzoj4807 車
			
    题目大意: Description 众所周知,車是中国象棋中最厉害的一子之一,它能吃到同一行或同一列中的其他棋子.車跟車显然不能在一起打 起来,于是rly一天又借来了许多许多的車在棋盘上摆了起来……他 ...
    
			
    4. 
						
  4. 虚拟机中liunx安装教程
			
    目标:在Linux服务器上部署Java开发的网站  工具 VirtualBox-4.3.8:下载后安装. linux系统镜像: Centos国内镜像文件下载地址: http://centos.ustc ...
    
			
    5. 
						
  5. Linux常用命令history/tcpdump/awk/grep
			
    1. 历史命令回显history 查询是什么时间什么人操作过文件: echo 'export HISTTIMEFORMAT="%F %T `whoami` "' >>  ...
    
			
    6. 
						
  6. python的内置模块re模块方法详解以及使用
			
    正则表达式 一.普通字符 .     通配符一个.只匹配一个字符 匹配任意除换行符"\n"外的字符(在DOTALL模式中也能匹配换行符 >>> import re ...
    
			
    7. 
						
  7. python爬虫 scrapy3_ 安装指南
			
      安装指南 安装Scrapy 注解 请先阅读 平台安装指南. 下列的安装步骤假定您已经安装好下列程序: Python 2.7 Python Package: pip and setuptools.  ...
    
			
    8. 
						
  8. Oracle笔记 - unfinished
			
    1. plsql查看xmltype字段的xml格式时,出现中文乱码问题,可通过该字段.getClobVal():查询到的xml将是中文不乱码的. 2. extract函数查询xml某节点下的所有节点, ...
    
			
    9. 
						
  9. SQL记录-PLSQL过程
			
    PL/SQL过程   子程序是一个程序单元/模块执行特定的任务.这些子程序被组合以形成更大的程序.这基本上是被称为“模块化设计”.子程序可以调用由另一个子程序或程序被称为调用程序. 子程序可以创建:  ...
    
			
    10. 
						
  10. ASP.NET中最简单的自定义控件
			
    ASP.NET用户控件一般适用于产生相对静态的内容,所以没有builtin的事件支持.本文讨论用户控件返回事件的方法.          假定用户控件(UserControl.ascx)中包含按钮控件 ...
    
			
    11.