一：理论

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. Go_21: Golang 中 time 包的使用二
			
    常量声明: const TimeLayout = "2006-01-02 15:04:05" 这是个奇葩,必须是这个时间点,据说是 go 诞生之日, 记忆方法:6-1-2-3-4- ...
    
			
    2. 
						
  2. 网络技术之TCP三次握手
			
    在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手方式建立一个连接 第一次握手:c->s 建立连接时,客户端发送SYN包(syn=j){注:syn:Synchronize Sequ ...
    
			
    3. 
						
  3. Kafka 温故(五)：Kafka的消费编程模型
			
    Kafka的消费模型分为两种: 1.分区消费模型 2.分组消费模型 一.分区消费模型 二.分组消费模型 Producer : package cn.outofmemory.kafka; import  ...
    
			
    4. 
						
  4. html5 canvas多个图像旋转
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    5. 
						
  5. 分布式文件系统 之 数据块（Block）
			
    众所周知,HDFS中以数据块(block)为单位进行存储管理.本文简单介绍一下HDFS中数据块(block)的概念,以及众多分布式存储系统(不止是HDFS)使用block作为存储管理基本单位的意义.  ...
    
			
    6. 
						
  6. ffmpeg查看音频文件信息
			
    查看音频文件的信息(基于本地路径) import subprocess import json path = r'D:\learn\download\NosVJ60QCIs0b8PVHMPomZJsr ...
    
			
    7. 
						
  7. mitmdump 屏蔽443错误
			
    mitmdump --ignore-hosts ".*443$" -s test.py
    
			
    8. 
						
  8. 001_shell经典案例
			
    一. 二. -n, --numeric-sort compare according to string numerical value -k, --key=KEYDEF sort via a key ...
    
			
    9. 
						
  9. 转载：Linux批量远程管理主机命令_pssh用法详解
			
    原文:http://www.linuxidc.com/Linux/2011-12/49635p2.htm (一) 使用前提 中心主机连接远程主机可以通过ssh密钥无密码连接 (二) 命令格式 pssh ...
    
			
    10. 
						
  10. 06 Go 1.6 Release Notes
			
    Go 1.6 Release Notes Introduction to Go 1.6 Changes to the language Ports Tools Cgo Compiler Toolcha ...
    
			
    11.