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

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

00:05.000 --> 00: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 nameInterfaceFired 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

Name Template Reference
1d-interleaved-parityfec video/1d-interleaved-parityfec [RFC6015]
3gpp video/3gpp [RFC3839][RFC6381]
3gpp2 video/3gpp2 [RFC4393][RFC6381]
3gpp-tt video/3gpp-tt [RFC4396]
BMPEG video/BMPEG [RFC3555]
BT656 video/BT656 [RFC3555]
CelB video/CelB [RFC3555]
DV video/DV [RFC6469]
encaprtp video/encaprtp [RFC6849]
example video/example [RFC4735]
H261 video/H261 [RFC4587]
H263 video/H263 [RFC3555]
H263-1998 video/H263-1998 [RFC4629]
H263-2000 video/H263-2000 [RFC4629]
H264 video/H264 [RFC6184]
H264-RCDO video/H264-RCDO [RFC6185]
H264-SVC video/H264-SVC [RFC6190]
H265 video/H265 [RFC7798]
iso.segment video/iso.segment [David_Singer][ISO-IEC_JTC1]
JPEG video/JPEG [RFC3555]
jpeg2000 video/jpeg2000 [RFC5371][RFC5372]
mj2 video/mj2 [RFC3745]
MP1S video/MP1S [RFC3555]
MP2P video/MP2P [RFC3555]
MP2T video/MP2T [RFC3555]
mp4 video/mp4 [RFC4337][RFC6381]
MP4V-ES video/MP4V-ES [RFC6416]
MPV video/MPV [RFC3555]
mpeg   [RFC2045][RFC2046]
mpeg4-generic video/mpeg4-generic [RFC3640]
nv video/nv [RFC4856]
ogg video/ogg [RFC5334][RFC7845]
parityfec   [RFC5109]
pointer video/pointer [RFC2862]
quicktime video/quicktime [RFC6381][Paul_Lindner]
raptorfec video/raptorfec [RFC6682]
raw   [RFC4175]
rtp-enc-aescm128 video/rtp-enc-aescm128 [_3GPP]
rtploopback video/rtploopback [RFC6849]
rtx video/rtx [RFC4588]
smpte291 video/smpte291 [RFC8331]
SMPTE292M video/SMPTE292M [RFC3497]
ulpfec video/ulpfec [RFC5109]
vc1 video/vc1 [RFC4425]
vnd.CCTV video/vnd.CCTV [Frank_Rottmann]
vnd.dece.hd video/vnd.dece.hd [Michael_A_Dolan]
vnd.dece.mobile video/vnd.dece.mobile [Michael_A_Dolan]
vnd.dece.mp4 video/vnd.dece-mp4 [Michael_A_Dolan]
vnd.dece.pd video/vnd.dece.pd [Michael_A_Dolan]
vnd.dece.sd video/vnd.dece.sd [Michael_A_Dolan]
vnd.dece.video video/vnd.dece.video [Michael_A_Dolan]
vnd.directv.mpeg video/vnd.directv-mpeg [Nathan_Zerbe]
vnd.directv.mpeg-tts video/vnd.directv.mpeg-tts [Nathan_Zerbe]
vnd.dlna.mpeg-tts video/vnd.dlna.mpeg-tts [Edwin_Heredia]
vnd.dvb.file video/vnd.dvb.file [Peter_Siebert][Kevin_Murray]
vnd.fvt video/vnd.fvt [Arild_Fuldseth]
vnd.hns.video video/vnd.hns.video [Swaminathan]
vnd.iptvforum.1dparityfec-1010 video/vnd.iptvforum.1dparityfec-1010 [Shuji_Nakamura]
vnd.iptvforum.1dparityfec-2005 video/vnd.iptvforum.1dparityfec-2005 [Shuji_Nakamura]
vnd.iptvforum.2dparityfec-1010 video/vnd.iptvforum.2dparityfec-1010 [Shuji_Nakamura]
vnd.iptvforum.2dparityfec-2005 video/vnd.iptvforum.2dparityfec-2005 [Shuji_Nakamura]
vnd.iptvforum.ttsavc video/vnd.iptvforum.ttsavc [Shuji_Nakamura]
vnd.iptvforum.ttsmpeg2 video/vnd.iptvforum.ttsmpeg2 [Shuji_Nakamura]
vnd.motorola.video video/vnd.motorola.video [Tom_McGinty]
vnd.motorola.videop video/vnd.motorola.videop [Tom_McGinty]
vnd.mpegurl video/vnd-mpegurl [Heiko_Recktenwald]
vnd.ms-playready.media.pyv video/vnd.ms-playready.media.pyv [Steve_DiAcetis]
vnd.nokia.interleaved-multimedia video/vnd.nokia.interleaved-multimedia [Petteri_Kangaslampi]
vnd.nokia.mp4vr video/vnd.nokia.mp4vr [Miska_M._Hannuksela]
vnd.nokia.videovoip video/vnd.nokia.videovoip [Nokia]
vnd.objectvideo video/vnd.objectvideo [John_Clark]
vnd.radgamettools.bink video/vnd.radgamettools.bink [Henrik_Andersson]
vnd.radgamettools.smacker video/vnd.radgamettools.smacker [Henrik_Andersson]
vnd.sealed.mpeg1 video/vnd.sealed.mpeg1 [David_Petersen]
vnd.sealed.mpeg4 video/vnd.sealed.mpeg4 [David_Petersen]
vnd.sealed.swf video/vnd.sealed-swf [David_Petersen]
vnd.sealedmedia.softseal.mov video/vnd.sealedmedia.softseal-mov [David_Petersen]
vnd.uvvu.mp4 video/vnd.uvvu-mp4 [Michael_A_Dolan]
vnd.vivo video/vnd-vivo [John_Wolfe]
VP8 video/VP8 [RFC7741]
原文地址:https://www.cnblogs.com/kidsitcn/p/8848160.html