html5 audio vedio and video.js
查看audio play事件
http://jplayer.org/HTML5.Media.Event.Inspector/
media.seekable, buffered,played这些数据
webVTT的用处(一般使用srt格式)
subtitle(dialogue), captions(sound effects, relevant music cue, and other relevant audio information)
descriptions(textual descriptions of the video component of the media resource)
chapters(intended to be used for navigating the media resource)
metadata(tracks intended for use from script, not displayed by user agent)
https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API
WEBVTT :01.000 --> :04.000
Never drink liquid nitrogen. :05.000 --> :09.000
- It will perforate your stomach.
- You could die.
webGL on canvas
基于canvas使用webGL可以对video逐帧修正后放到canvas中播放，效果很棒
http://seriouslyjs.org
video + canvas = magic:
http://html5doctor.com/video-canvas-magic/
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
html5 media events:
https://html.spec.whatwg.org/multipage/media.html#mediaevents
| Event name | Interface | Fired when... | Preconditions |
|---|---|---|---|
loadstart |
Event |
The user agent begins looking for media data, as part of the resource selection algorithm. | networkState equals NETWORK_LOADING |
progress |
Event |
The user agent is fetching media data. | networkState equals NETWORK_LOADING |
suspend |
Event |
The user agent is intentionally not currently fetching media data. | networkState equals NETWORK_IDLE |
abort |
Event |
The user agent stops fetching the media data before it is completely downloaded, but not due to an error. | error is an object with the code MEDIA_ERR_ABORTED. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. |
error |
Event |
An error occurs while fetching the media data or the type of the resource is not supported media format. | error is an object with the code MEDIA_ERR_NETWORK or higher. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. |
emptied |
Event |
A media element whose networkState was previously not in the NETWORK_EMPTY state has just switched to that state (either because of a fatal error during load that's about to be reported, or because the load() method was invoked while the resource selection algorithm was already running). |
networkState is NETWORK_EMPTY; all the IDL attributes are in their initial states. |
stalled |
Event |
The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. | networkState is NETWORK_LOADING. |
loadedmetadata |
Event |
The user agent has just determined the duration and dimensions of the media resource and the text tracks are ready. | readyState is newly equal to HAVE_METADATA or greater for the first time. |
loadeddata |
Event |
The user agent can render the media data at the current playback position for the first time. | readyState newly increased to HAVE_CURRENT_DATA or greater for the first time. |
canplay |
Event |
The user agent can resume playback of the media data, but estimates that if playback were to be started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content. | readyState newly increased to HAVE_FUTURE_DATA or greater. |
canplaythrough |
Event |
The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering. | readyState is newly equal to HAVE_ENOUGH_DATA. |
playing |
Event |
Playback is ready to start after having been paused or delayed due to lack of media data. | readyState is newly equal to or greater than HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA. Even if this event fires, the element might still not be potentially playing, e.g. if the element is paused for user interaction or paused for in-band content. |
waiting |
Event |
Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course. | readyState is equal to or less than HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position is not contained in any of the ranges in buffered. It is possible for playback to stop for other reasons without paused being false, but those reasons do not fire this event (and when those situations resolve, a separate playing event is not fired either): e.g., playback has ended, or playback stopped due to errors, or the element has paused for user interaction or paused for in-band content. |
seeking |
Event |
The seeking IDL attribute changed to true, and the user agent has started seeking to a new position. |
|
seeked |
Event |
The seeking IDL attribute changed to false after the current playback position was changed. |
|
ended |
Event |
Playback has stopped because the end of the media resource was reached. | currentTime equals the end of the media resource; ended is true. |
durationchange |
Event |
The duration attribute has just been updated. |
|
timeupdate |
Event |
The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. | |
play |
Event |
The element is no longer paused. Fired after the play() method has returned, or when the autoplay attribute has caused playback to begin. |
paused is newly false. |
pause |
Event |
The element has been paused. Fired after the pause() method has returned. |
paused is newly true. |
ratechange |
Event |
Either the defaultPlaybackRate or the playbackRate attribute has just been updated. |
|
resize |
Event |
One or both of the videoWidth and videoHeight attributes have just been updated. |
Media element is a video element; readyState is not HAVE_NOTHING |
volumechange |
Event |
Either the volume attribute or the muted attribute has changed. Fired after the relevant attribute's setter has returned. |
videojs can play必须配合使用mime
http://www.iana.org/assignments/media-types/media-types.xhtml#video
html5 audio vedio and video.js的更多相关文章
- HTML5 audio元素如何使用js与jquery控制其事件
前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜 ...
- video.js视频播放插件
1 初始化 Video.js初始化有两种方式. 1.1 标签方式 一种是在<video>标签里面加上class="video-js"和data-setup='{}'属性 ...
- [jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
- Using HTML5 audio and video
From:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video Using HTML5 ...
- HTML5(Canvas Vedio Audio 拖动)
1.Canvas (在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字) HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形 ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)
http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...
- HTML5视频播放插件 video.js介绍
video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/ git& ...
- Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
随机推荐
- linux 编译安装amqp
背景: 下面的内容是我根据网上博客小松的文章 https://www.phpsong.com/2223.html 做的修改,因为我走到make 编译amqp这步报错 最开始报下面的这个错误,是因为要安 ...
- Druid连接池（四）
十七.Druid加密 运维和DBA都不希望把密码明文直接写在配置文件中,Druid提供了数据库密码加密的功能. ConfigFilter的作用包括: 从配置文件中读取配置 从远程http文件中读取配置 ...
- Spark2.3.1中用各种模式来跑官方Demo
1 使用单机local模式提交任务 local模式也就是本地模式,也就是在本地机器上单机执行程序.使用这个模式的话,并不需要启动Hadoop集群,也不需要启动Spark集群,只要有一台机器上安装了J ...
- Asterist搭建步骤
环境: # cat /proc/version Linux version 2.6.18-308.el5 (mockbuild@x86-010.build.bos.redhat.com) (gcc v ...
- Ionic开发之如何修改Cordova插件
由于大多数的Cordova plugin都是国外的,一些提示信息通常都是英文, 这就需要我们自己修改成中文信息. 除此之外,还有可能插件的样式,皮肤等和整体项目的风格不一致,这个时候也是要修改的. 可 ...
- Ionic3 UI组件之 ImageViewer
组件特性: 轻触图片可全屏查看 手势上下滑动可关闭全屏查看 点击导航箭头可关闭视图 双击查看全图,并可放大 参考地址:https://github.com/Riron/ionic-img-viewer ...
- HTML5中Access-Control-Allow-Origin解决跨域问题
www.111cn.net 更新:2015-01-07 编辑:flyfox 来源:转载 跨域在开发中一些是一个比较常见的问题虽然有json或者xml来解决,现在html5开始流行了,我们可以通过Acc ...
- rabbitmq-channel方法介绍
先介绍rabbmitmq的几个方法: // 声明一个队列 -// queue 队列名称 // durable 为true时server重启队列不会消失 (是否持久化) // exclusive 队列是 ...
- Android Studio 1.1.0汉化初步出炉！
我找到去年12月国人汉化的版本,然后迁移上来的.实测支持Android window最新版(1.1.0) 项目分4部分:1压缩好的:2文本分析器:3原生的语言包:4原版语言包备份 现在一些新增的项目没 ...
- Java泛型类型
E element 常用于集合中表示存放元素 T type Java类 K key 键 V value 值 N number 数值类型 ? 不确定的类型 一种约定俗成吧