一：理论

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. VS2010 代码突然改变字体 解决办法
			
    sfsfsddffs dffsfsfsfsf 如上,第一行是突然变成宽体的字体,第二行是恢复后的字体,方法就是: shift+空格键,一起按就会在这两种字体之间变换~
    
			
    2. 
						
  2. 【洛谷P1471】方差
			
    题目大意:维护一个有 N 个元素的序列,支持以下操作:区间加,区间询问均值,区间询问方差. 题解:可知区间均值和区间和有关,即:维护区间和就等于维护了区间均值.区间方差表达式为 \(\frac{\Si ...
    
			
    3. 
						
  3. oracle数据库连接池查看
			
    select username , count(*), machine from v$session where username is not null group by username, mac ...
    
			
    4. 
						
  4. Spark记录-Scala shell命令
			
    1.scala shell命令 scala> :help All commands can be abbreviated, e.g., :he instead of :help. :edit & ...
    
			
    5. 
						
  5. 35个java代码性能优化总结
			
    前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑 的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用 ...
    
			
    6. 
						
  6. es6笔记（6）  Iterator 和 for...of循环
			
    概要 js中的数组.对象,加上ES6中增加的Map.Set四种数据集合. Iterator提供了一种机制,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍 ...
    
			
    7. 
						
  7. git与代码托管工具
			
    1.git初识 git是一个版本管理工具,用来管理项目的不同的版本,记录下不同的提交记录,git还可以构建不同的分支,用来给不同的人来推送使用. 推荐的git教程:https://www.cnblog ...
    
			
    8. 
						
  8. linux笔记_day12_shell编程
			
    1.shell中如何进行算术运算 A=1 B=2 1)let 算术运算表达式 let C=$A+$B 2)$[算术运算表达式] C=$[$A+$B] 3)$(($A+$B)) 4) expr 算术表达 ...
    
			
    9. 
						
  9. mysql grep database error(cannot rmdir /dbname)
			
    service mysql stop cd /var/lib/mysql/dbname rm -rf .fmr rm -rf .txt service mysql start srop databas ...
    
			
    10. 
						
  10. TFS报表管理器无权限访问的配置
			
    刚接触TFS,有太多的功能不能知道怎么配置,今天想了解一下TFS的报表功能,当登录TFS后,点击项目中的“查看报表”
    
			
    11.