1.参数

  video是h5的新特性(虽然新了很多年了),使得枯燥的页面有了很多生机。html代码示例:

 <video
id="kingdom-video"
src=""
preload
controls>
</video>
<video width="320" height="240" controls>
<source src="/example/video/movie.mp4" type="video/mp4">
<source src="/example/video/movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

  可见,可以直接通过src指定播放媒体的网络路径,也可以使用source标签来进行指定。

  常用参数如下:

//autoplay 则视频在就绪后马上播放。
//controls 用户显示控件,比如播放按钮。
//width 频播放器的宽度。
//height 设置视频播放器的高度
//loop 文件完成播放后再次开始播放。
//preload 视频在页面加载时进行加载,并预备播放
// src 要播放的视频的 URL。

2.操作

  常用操作如下:
var myVid=document.getElementById("video1"); //获取video 元素
myVideo.play(); //播放视频
myVideo.pause(); //暂停视频
myVideo.width=560; //设置视频宽度
myVideo.height=560; //设置视频高度 全屏:

chrome

document.getElementById('video1').webkitRequestFullScreen()
document.webkitCancelFullScreen();

Firefox

document.getElementById('video1').mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C 提议

document.getElementById('video1').requestFullscreen();
document.exitFullscreen();

【css伪类】

:fullscreen – 当前全屏化的元素
:fullscreen-ancestor – 所有全屏化元素的祖先元素

3.完整的常用操作、事件

 var myVid=document.getElementById("video1");
//播放的速度
myVid.playbackRate = 1
myVid.onloadstart = function(){
console.log(`onloadstart 客户端开始请求数据 `);
}
myVid.ondurationchange=function(){
console.log(`durationchange 资源长度改变 `);
}
myVid.onratechange=function(){
console.log(`onratechange //播放速率改变 `);
}
myVid.onseeking=function(){
console.log(` //seeking 寻找中 点击一个为(缓存)下载的区域`);
}
myVid.onseeked=function(){
console.log(` //seeked 寻找完毕 `);
}
myVid.onplay=function(){
console.log(`开始播放时触发 `);
}
myVid.onwaiting=function(){
console.log(`播放由于下一帧数据未获取到导致播放停止,但是播放器没有主动预期其停止,仍然在努力的获取数据,简单的说就是在等待下一帧视频数据,暂时还无法播放。 `);
}
myVid.onplaying=function(){
console.log(`真正处于播放的状态,这个时候我们才是真正的在观看视频。 `);
}
myVid.oncanplay=function(){
console.log(`视频播放器已经可以开始播放视频了,但是只是预期可以正常播放,不保证之后的播放不会出现缓冲等待。 `);
}
myVid.onpause=function(){
console.log(`暂停播放时触发 `);
}
myVid.onended=function(){
alert(` //播放结束 loop 的情况下不会触发 `);
}
myVid.onvolumechange=function(){
console.log(`音量改变 `);
}
myVid.onloadedmetadata=function(){
console.log(`获取视频meta信息完毕,这个时候播放器已经获取到了视频时长和视频资源的文件大小。 `);
}
myVid.onloadeddata=function(){
console.log(`"视频播放器第一次完成了当前播放位置的视频渲染。"`);
} myVid.onabort=function(){
console.log(`客户端主动终止下载(不是因为错误引起), `);
} myVid.onerror=function(){
console.log(`请求数据时遇到错误`);
//1.用户终止 2.网络错误 3.解码错误 4.URL无效
alert(myVid.error.code);
} //客户端请求数据
myVid.onprogress=function(){ console.log(`客户端正在请求数据 触发多次,是分段请求的`);
console.log(myVid.buffered);
//0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
console.log(`networkState ${myVid.networkState}`);
// //当前播放的位置,赋值可改变位置 myVid.currentTime = 11 从11秒位置开始播放
console.log(myVid.currentTime);
// //返回当前资源的URL
console.log(myVid.currentSrc); console.log(myVid.videoWidth);
//播放结束 返回true 或 false
console.log(myVid.ended);
//音量大小 为0-1 之间的值
console.log(myVid.volume); //当前资源长度
console.log(myVid.duration);
console.log(myVid.startDate)
// myVid.currentTime = 11

4.监听播放过程

 //使用事件监听方式捕捉事件
video.addEventListener("timeupdate",function(){
var timeDisplay;
//用秒数来显示当前播放进度--实测1秒3次
timeDisplay = Math.floor(video.currentTime);
console.log(Math.floor(video.currentTime))
//当视频播放到 4s的时候做处理
if(timeDisplay == 4){
//处理代码
}
},false);

5.扩展(audio)

  音频有类似的属性和事件

<audio> 标签属性:

  1. src:音乐的URL
  2. preload:预加载
  3. autoplay:自动播放
  4. loop:循环播放
  5. controls:浏览器自带的控制

6.对象获取

//audio可以直接通过new创建对象
Media = new Audio("http://www.abc.com/test.mp3");
//audio和video都可以通过标签获取对象
Media = document.getElementById("media")

7.media方法属性总结

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段区域的结束位置

事件:

 eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e);
});
} 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"); //音量改变
 

video相关参数、操作和事件的更多相关文章

  1. 11g直接路径读、相关参数、10949事件介绍

    转载自刘向兵老师:http://www.askmaclean.com/archives/11g-direct-path-read-10949-_small_table_threshold-_seria ...

  2. 重新想象 Windows 8 Store Apps (70) - 其它: 文件压缩和解压缩, 与 Windows 商店相关的操作, app 与 web, 几个 Core 的应用, 页面的生命周期和程序的生命周期

    [源码下载] 重新想象 Windows 8 Store Apps (70) - 其它: 文件压缩和解压缩, 与 Windows 商店相关的操作, app 与 web, 几个 Core 的应用, 页面的 ...

  3. Oracle buffer cache与相关的latch等待事件

    buffer cache与相关的latch等待事件 1.buffer cache 2.latch:cache buffers lru chain 3.latch:cache buffers chain ...

  4. Monkey相关参数 笔记

    Monkey相关参数  笔记 Monkey是Android系统自带的一个命令行工具,可运行在模拟器里或实际设备中. Monkey可以向被测试的应用程序发送伪随机的用户事件流(如按键.触屏.手势等),实 ...

  5. MySQL复制相关参数详解

    MySQL复制相关参数详解 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.复制相关系统变量 1>.server_id 是必须设置在master和每个slave上的唯一标 ...

  6. MySQL8常见客户端和启动相关参数

    MySQL8常见客户端和启动相关参数 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL常见的客户端 1>.使用MySQL服务自带的mysql连接工具 2>. ...

  7. 第一百七十一节,jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one

    jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...

  8. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  9. MySQL相关参数总结

    保留个原文链接,避免被爬虫爬了过去,以便后续更正补充:https://www.cnblogs.com/wy123/p/11273023.html MySQL参数繁多,是一个需要根据具体业务.软硬件环境 ...

随机推荐

  1. 理解Device Tree Usage

    英语原文地址: htttp://devicetree.org/Device_Tree_Usage 本文介绍如何为新的机器或板卡编写设备树(Device Tree), 它旨在概要性的介绍设备树概念,以及 ...

  2. 从零开始学习和改造activiti流程引擎的13天,自己记录一下

    day#1(11.13) 尝试通过spring boot 集成最新版activiti 7,但是苦于官方的文档基本为空,无法完成spring boot的配置,最终按照activiti 6的文档,手工初始 ...

  3. 【深度学习】--DCGAN从入门到实例应用

    一.前述 DCGAN就是Deep Concolutions应用到GAN上,但是和传统的卷积应用还有一些区别,最大的区别就是没有池化层.本文将详细分析卷积在GAN上的应用. 二.具体 1.DCGAN和传 ...

  4. js简单四则运算

    作业来源 本次作业要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2166 我的项目GitHub远程仓库地址:https:/ ...

  5. .NET Core中的一个接口多种实现的依赖注入与动态选择看这篇就够了

    最近有个需求就是一个抽象仓储层接口方法需要SqlServer以及Oracle两种实现方式,为了灵活我在依赖注入的时候把这两种实现都给注入进了依赖注入容器中,但是在服务调用的时候总是获取到最后注入的那个 ...

  6. [深度应用]·DC竞赛轴承故障检测开源Baseline(基于Keras 1D卷积 val_acc:0.99780)

    [深度应用]·DC竞赛轴承故障检测开源Baseline(基于Keras1D卷积 val_acc:0.99780) 个人网站--> http://www.yansongsong.cn/ Githu ...

  7. Asp.Net Core 轻松学-实现跨平台的自定义Json数据包

    前言     在前后端分离的业务开发中,我们总是需要返回各种各样的数据包格式,一个良好的 json 格式数据包是我们一贯奉行的原则,下面就利用 Json.Net 来做一个简单具有跨平台的序列化数据包实 ...

  8. SmartSql Config配置

    Demo <?xml version="1.0" encoding="utf-8" ?> <SmartSqlMapConfig xmlns=& ...

  9. etcd v3集群备份和恢复

    官方文档 https://github.com/etcd-io/etcd/blob/master/Documentation/op-guide/recovery.md 一.运行3个etcd节点 我们用 ...

  10. Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...