一：理论

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. CF1110E Magic Stones（构造题）
			
    这场CF怎么这么多构造题…… 题目链接:CF原网 洛谷 题目大意:给定两个长度为 $n$ 的序列 $c$ 和 $t$.每次我们可以对 $c_i(2\le i<n)$ 进行一次操作,也就是把 $c ...
    
			
    2. 
						
  2. Luogu2661 信息传递（图论）
			
    Luogu2661 信息传递(图论) Description 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti ...
    
			
    3. 
						
  3. Mac OS X下：TensorBoard可视化问题
			
    花了1,2个小时,Tensorboard Garphs一直不显示,最后发现竟然是多了一个“=”号
    
			
    4. 
						
  4. std::bind常见的坑
			
    http://note.youdao.com/noteshare?id=bce9cdea8e94501186b5ba3026af685f
    
			
    5. 
						
  5. SQL2005分页存储过程（支持多表联接）
			
    Code /*********************************************************   * 作    用:数据分页(完整SQL分页存储过程(支持多表联接)) ...
    
			
    6. 
						
  6. App爬虫神器mitmproxy和mitmdump的使用
			
    原文 mitmproxy是一个支持HTTP和HTTPS的抓包程序,有类似Fiddler.Charles的功能,只不过它是一个控制台的形式操作. mitmproxy还有两个关联组件.一个是mitmdum ...
    
			
    7. 
						
  7. Knowledge Tracing -- 基于贝叶斯的学生知识点追踪（BKT）
			
    目前,教育领域通过引入人工智能的技术,使得在线的教学系统成为了智能教学系统(ITS),ITS不同与以往的MOOC形式的课程.ITS能够个性化的为学生制定有效的 学习路径,通过根据学生的答题情况追踪学生 ...
    
			
    8. 
						
  8. python---django中STATIC_ROOT和STATIC_URL以及STATICFILES_DIRS
			
    先引入两篇相关文章,从中了解更为详细 django 静态资源配置详解 django静态文件配置 Django的STATIC_ROOT和STATIC_URL以及STATICFILES_DIRS(先看)  ...
    
			
    9. 
						
  9. python---django中orm的使用（5）数据库的基本操作(性能相关：select_related,和prefetch_related重点)（以及事务操作）
			
    ################################################################## # PUBLIC METHODS THAT ALTER ATTRI ...
    
			
    10. 
						
  10. OpenGL ES 2.0 Shader 调试新思路(二): 做一个可用的原型
			
    OpenGL ES 2.0 Shader 调试新思路(二): 做一个可用的原型 目录 背景介绍 请参考前文OpenGL ES 2.0 Shader 调试新思路(一): 改变提问方式 优化 ledCha ...
    
			
    11.