当前位置: 首页 > Web前端 > HTML5

H5中video标签的属性和方法

时间:2023-04-05 02:11:18 HTML5

前言最近在写一个自定义播放器。在编写之前,我们必须遍历播放器的所有属性和方法。知己知彼,方能百战百胜。。。后面会把我们写的播放器和踩过的一些坑也上传视频标签的内联属性src:的urlvideoposter:视频封面,不播放时显示的图片preload:预加载autoplay:autoplayloop:循环播放controls:浏览器自带控制条width:视频宽度height:视频高度webkit-playsinline="true"IOS防止全-屏幕播放playsinline="true"同上x-webkit-airplay="true"支持iosAirPlay功能x5-video-player-type="h5"开启同层设备H5播放x5-video-player-fullscreen="true"设置全屏x5-video-orientation="portraint"竖屏style="object-fit:fill"覆盖覆盖muted="true"应该有一些静音播放。。。但是没用暂时可以在MDN文档中查看video对象的属性和方法1.错误状态$video.error;//null:正常$video.error.code;//1。用户终止2.网络错误3.解码错误4.无效的URL2.网络状态属性(有些比较常用)$video.currentSrc;//返回当前资源的URL$video.src=value;//返回或设置当前资源的URL$video.canPlayType(type);//某种格式的资源是否可以播放$video.networkState;//0。该元素未初始化1.正常但未使用网络2.下载数据3.未找到资源$video.load();//重新加载src指定的资源$video.buffered;//返回缓冲区域,$video.buffered.end(0)获取最后时刻的数据$video.preload;//none:无预加载metadata:preload加载资源信息auto:3.就绪状态$video.readyState;//1:HAVE_NOTHING2:HAVE_METADATA3.HAVE_CURRENT_DATA4.HAVE_FUTURE_DATA5.HAVE_ENOUGH_DATA$video.seeking;//是否正在寻找4.播放状态(常用)$video.currentTime=value;//当前播放位置,赋值可以改变位置$video.duration;//当前资源长度流返回无限$video.paused;//是否暂停$video.defaultPlaybackRate=value;//默认播放速度,可设置$video.playbackRate=value;//当前播放速度,设置后立即更改$video.seekable;//返回可搜索区域$video.ended;//是否结束$video.autoPlay;//是否自动播放$video.loop;//是否循环$video.play();//播放$video.pause();//Pause5.Control$video.controls;//是否有默认控制条$video.volume=value;//音量$video.muted=value;//静音视频事件方法(一般加*)loadstart//客户端开始请求数据*progress//客户端正在请求数据suspend//Delaydownloadabort//客户端主动终止下载(不是错误引起的),*error//请求数据时遇到错误stalled//网速stall*play//play()和autoplay开始播放时触发*pause//pause()触发loadedmetadata//成功获取资源长度*waiting//等待data,notanerror*playing//开始播放canplay//可以播放,但可能因为loading而暂停*canplaythrough//可以播放seeked//resourceseekedseeked//资源搜索完成*timeupdate//播放时间变化*ended//播放结束ratechange//播放速率变化durationchange//资源长度变化*volumechange//音量变化基本自定义播放器代码都是根据这个api和属性写的,方便大家以后参考。。。。