一：理论

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. CRM 2013发邮件的插件报错Cannot open Sql Encryption Symmetric Key because Symmetric Key password does not exist in Config DB
			
    解决方法: 1. 依次打开Settings->Data management –> Data Encryption 然后在上面红框里填上任意一个key即可.
    
			
    2. 
						
  2. suoi44 核能显示屏 (cdq分治)
			
    首先二维树状数组肯定开不下 仿照二维树状数组的做法,如果有差分数组$d[i][j]=a[i][j]-a[i-1][j]-a[i][j-1]+a[i-1][j-1]$,那么就有: $$sum[x][y] ...
    
			
    3. 
						
  3. psutil库
			
    psutil是一个非常强大的第三方库,用法简单,这里主要是做一下梳理. 先看看官方说明: psutil (python system and process utilities) is a cross ...
    
			
    4. 
						
  4. IntelliJ IDEA的安装和使用教程
			
    1. 安装IntelliJ IDEA IntelliJ IDEA(简称"IDEA")是Java语言的集成开发环境,它是JetBrains公司的产品之一.详情请看:JetBrains ...
    
			
    5. 
						
  5. 51nod 1479 小Y的数论题
			
    一脸不可做题~~~233333 T<=100000,所以一定要logn出解啦. 但是完全没有头绪*&#……%*&……()……#￥*#@ 题解: 因为2^p+2^p=2^(p+1) ...
    
			
    6. 
						
  6. python自带的IDLE如何清屏
			
    作者:知乎用户 链接:https://www.zhihu.com/question/20917976/answer/32876441 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
    
			
    7. 
						
  7. Numpy - Pandas - Matplot 功能与函数名 速查
			
    用Python做数据分析,涉及到的函数实在是太多了,容易忘记,去网上查中文基本上差不到,英文有时候描述不清楚问题. 这里搞个针对个人习惯的函数汇总速查手册,下次需要用一个什么功能,就在这里面查到对应的 ...
    
			
    8. 
						
  8. 在angular中利用分页插件进行分页
			
    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
    
			
    9. 
						
  9. Linux iptables常用命令的使用
			
    为什么会有本文 因为最近帮一个朋友布署一个上网梯子,他那边本来用的是v2ray,但是他想用ssr,但是安装配置ssr过程中出了很多问题,比如linux内核版本4.9有点老,不支持bbr加速.无法连接s ...
    
			
    10. 
						
  10. size属性
			
    size 属性 size 属性规定输入字段的尺寸(以字符计): <form action=""> First name:<br> <input typ ...
    
			
    11.