H5的Video事件,控制方法,及监听

1.标签基本属性

src :视频的属性

poster:视频封面,没有播放时显示的图片
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
width:视频宽度

height:视频高度

 

2.html代码

<video id="media" src="http://www.jb51.net/test.mp4" controls width="400px" heigt="400px"></video> 
//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象

3.JS代码

Media = document.getElementById("media");

4.Media的方法和属性

HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域,TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA- Media.seeking; //是否正在seeking
//回放状态
Media.currentTime = value; //当前播放的位置,赋值可改变位置
Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
Media.playbackRate = value;//当前播放速度,设置后马上改变
Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//视频控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

 

//相关事件
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起)
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据,并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变

 

转载于:https://www.cnblogs.com/fps2tao/p/10550726.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569629.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hexo+GitHub 快速搭建个人博客(一)---- 基本部署

前期准备&#xff1a; 1.Git shell 2.node.js 3.在github上创建一个仓库&#xff0c;仓库命名格式为xxx.github.io 一、安装Hexo cd进入自己想要安装的目录下&#xff0c;执行下面的命令 npm install hexo-cli -g 升级Hexo npm update hexo -g 卸载Hexo 如果安装过程中…

Gym - 101755G Underpalindromity (树状数组)

Let us call underpalindromity of array b of length k the minimal number of times one need to increment some elements bj by 1 so that the array b would become a palindrome, that is, b1  bk, b2  bk - 1, and so on. The array of length n, consisting of i…

Hexo+GitHub 快速搭建个人博客(二)---- 域名解析

前期准备&#xff1a; 备案的国内域名或者国外域名 &#xff08;后面会解释为什么&#xff0c;这里以阿里云域名为例&#xff09; 一、将个人域名与GitHub博客绑定 我们在Hexo目录下的source子目录内创建一个txt文件&#xff0c;内容写自己的域名&#xff0c;这里可以是一级…

.net core consul 服务配置 服务发现 服务健康检测 服务变更加载

准备环境 安装consul之后 1. 创建一个.net core webapi 举例为UsercenterService 2. nuget引用Consul组件 https://github.com/PlayFab/consuldotnet 3. 创建配置实体类 &#xff08;后面涉及功能介绍时候再解释属性含义&#xff09; 1 public class AppSettings2 {3 …

Hexo+GitHub 快速搭建个人博客(三)---- 改变主题

前期准备&#xff1a; 基本的Linux命令 基本的GitHub命令 Hexo有多种博客框架&#xff0c;在 https://hexo.io/themes/ 里可以找到非常多优秀的博客框架&#xff0c;而且都是免费的。 首先大家可以去找一款自己喜欢的框架&#xff0c;可以选择浏览和直接进入GitHub进行fork …

hdu1814 Peaceful Commission

题目链接&#xff1a;戳我 菜得不行了&#xff0c;直到今天才刚开始学2-SAT。。。。 2-SAT的模板&#xff0c;因为是求最小字典序&#xff0c;所以只能用上限为\(O(nm)\)的最暴力的方法来做。。。 #include<iostream> #include<cstring> #include<cstdio> #i…

Vue入门 ---- 组件式开发

##组件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible" conten…

/usr/bin/python^M: 解释器错误: 没有那个文件或目录

【1】问题现象 执行python脚本&#xff0c;提示错误&#xff1a;/usr/bin/python^M: 解释器错误: 没有那个文件或目录 【2】原因分析 大多数是因为脚本文件在windows下编辑过。在windows下&#xff0c;每一行的结尾是\r\n&#xff0c;而在linux下文件的结尾是\n。 那么&#xf…

Vue入门 ---- 组件通信

##组件通信&#xff1a; 子组件获取父组件的数据父组件获取子组件的数据平行组件之间的通信vue2.0中用子组件修改父组件数据报错问题一定需要通过子组件修改父组件 子组件获取父组件的数据 通过子组件中的属性props&#xff0c;以与父组件数据的绑定。&#xff08;注意&#x…

[51nod1201]整数划分

题目链接&#xff1a; 51nod1201 神仙DP 设\(f[i][j]\)表示\(i\)分成\(j\)个数的划分数&#xff0c;如何转移&#xff1f; 有转移式&#xff1a;\(f[i][j]f[i-j][j-1]f[i-j][j]\) 为什么呢&#xff1f;第一种是先加一个划分出来的数\(1\)&#xff0c;但是为了和之前的所有数不一…

Vue入门 ---- vue-loader 、vue-cli

简介&#xff1a; vue-loader&#xff0c;来源于css-rouder、url-loader、html-loader… 后台node.js–>require exports等都是基于模块的开发 broserify 较早的模块加载器&#xff0c;但是只能加载js webpack&#xff0c;模块加载器&#xff0c;一切东西皆模块&#xff0c;…

Python档案袋( 命令行操作 及 Os与Shutil文件操作补充 )

调用系统命令 import os#调用系统命令&#xff0c;输出只能输出到屏幕上&#xff0c;不能用变量接收 os.system("ipconfig")#调用系统命令&#xff0c;并把执行结果存到变量中 resos.popen("ipconfig").read() print(res) OS模块文件操作 简单的文件和目录…

Vue入门---- vue-router

#简介&#xff1a; vue-router官网 用 Vue.js vue-router 可以快速创建SPA&#xff08;单页应用程序&#xff09;&#xff0c;是非常简单的。使用 Vue.js &#xff0c;我们已经可以通过组合Component来组成应用程序。 引入 vue-router 的过程&#xff1a;将组件(components)映…

Vue入门 ---- vuex

##简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 vuex分为三大部分&#xff1a; state&#xff0c;驱动应用的数据源&#xff1b; view&#xff0c;以声…

2 Class类

在程序运行期间&#xff0c;Java运行时系统始终为所有的对象维护一个被称为运行时地类型标识。这个信息跟踪着每个对象所属地类。虚拟机 利用运行时类型信息选择相应地方法执行。 然而&#xff0c;可以通过专门地Java类访问这些信息。保存这些信息地类称为Class。这个名字很容易…

Dijkstra算法(c++版)

最短路径&#xff08;DP的应用&#xff09; 单源最短路径&#xff0c;不允许出现负环 核心思想&#xff1a;更新估算距离&#xff0c;松弛 δ(u,v)≤δ(u,x)δ(x,v)\delta(u, v) \leq \delta(u, x) \delta(x, v) δ(u,v)≤δ(u,x)δ(x,v) 时间复杂度与采用的数据结构有关&…

day1-参数化关联函数响应断言

1、参数化 1&#xff09;、准备参数化文件 2&#xff09;&#xff0c;添加CSV数据文件设置 3&#xff09;、在请求里 引用参数 2、关联函数 1&#xff09;、给学生充值金币需要从登录返回获取登录cookie 在登录接口添加后置处理器JSON Extractor 用户登录返回结果为&#xff1…

MySQL 8.0 error 2059: Authentication plugin 'caching_sha2_password' cannot be loaded

安装MYSQL8.0版本之后&#xff0c;使用可视化管理工具Workbench或者Navicat都会产生一个类似的报错。 原因&#xff1a;MYSQL8.0之前的版本中加密规则为mysql_native_password. 而mysql8之后的加密规则为caching_sha2_password. 解决办法&#xff1a; 打开CMD进入MYSQL&#…

语句覆盖,判定覆盖,条件覆盖,条件/判定覆盖,条件组合覆盖,路径覆盖

最近在复习软件测试的考试&#xff0c;每次到白盒测试这里都要为这几种逻辑覆盖方法感到头疼&#xff0c;这次终于决定好好整理出来。 逻辑覆盖是通过对程序逻辑结构的遍历实现程序的覆盖。它是一系列测试过程的总称&#xff0c;这组测试过程逐渐进行越来越完整的通路测试。 根…

PHP实现简单文件上传系统

目录结构如下&#xff0c;其中包含两个代码文件和一个uploads文件夹&#xff08;用于存放上传的文件&#xff09; index.php 该代码实现html页面&#xff0c;包括需要填写学号和姓名&#xff0c;上传文件大小不得超过20M <form action"fileSystem.php" method&…