web前端入门到实战:Html5新增视频功能——video API 事件

video API事件

web前端入门到实战:Html5新增视频功能——video API 事件_第1张图片

** play()  可以控制视频自动播放**

但是在chrome浏览器中不允许自动播放,只有在设置静音时才能允许自动播放

理由是:视频自动播放在终端非常耗电,因此被禁止

不过chrome浏览器允许自动播放7s以内的视频,然而很少有人会放7s以内的视频,而是直接用gif


专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)




    
    video


    

    



pause() 视频暂停

    
    
播放
暂停

duration 视频总长度

在刚加载时无法显示,结果是NaN

可以使用定时器解决,或者等到时视频播放结束

    
    
播放
暂停

currentTime 设置或返回视频的当前时间

    
    
播放
暂停
快进

src 设置视频的src属性(也可用于替换)

    

    

volume 获取和设置视频音量

配合range使用效果很不错哦

    
    

    

web前端入门到实战:Html5新增视频功能——video API 事件_第2张图片

controls 设置视频的控件

    

    

muted 设置视频静音,但这个muted不会出现在video标签上

    

    

web前端入门到实战:Html5新增视频功能——video API 事件_第3张图片

** networkState 视频的网络状态**

0 未初始化

1 视频已经获取到资源,未使用网络

2 视频正在加载(常见于网络视频),边下载边看

3 未找到视频资源(常见src属性错误,或者刚初始化时,因为video不会立刻找到资源,存在延迟)

    

    

video API 事件2

web前端入门到实战:Html5新增视频功能——video API 事件_第4张图片

currentSrc 返回当前音视频的地址

currentSrc和src的区别:

src 可以设置音视频地址

currentSrc 不能设置音视频地址,只能获取(而且必须等到视频资源已经加载完可以使用的时候才能获取到)

专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)

    

    

ended 返回视频是否已经播放结束

    

    =


loop 设置或返回视频的循环播放

    
    
不循环

playbackRate  设置或获取视频的播放速度

   
    
0.5 1 2

readyState 视频的当前就绪状态

0 没有获取到信息

1 有数据,但是快不足以支撑

2 当前数据可用,但是下一帧不可用

3 数据正在缓冲,但当前及下一帧是可用的

4 视频已经准备就绪,数据足以播放


    

    

timeupdate 视频播放位置在改变

    
    

这里有个小bug,就是秒数是个位数时,前面少了0,这个后面再处理

seeked 视频已经跳转到新的时间位置

seeking 视频正在跳转到新的时间位置

监听时需要加on   onseeked   onseeking

    

    

web前端入门到实战:Html5新增视频功能——video API 事件_第5张图片

volumechange 音量改变事件

使用时需要加上on


专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)

    
    

音量改变

video API 事件3

** requestFullscreen 全屏**

首先必须是在事件中触发才能使用

其次不同浏览器有不同的写法

chrome:  webkitRequestFullscreen

火狐:mozRequestFullScreen

IE:ms

退出全屏没有设置,默认会使用自带的控件(因为即使没有control控件,在全屏状态下默认也会出现控件)

    
    

全屏

load 重新加载视频资源

注意只是重新加载视频资源,整个页面并不会刷新

通常用于改变视频的src之后的操作


专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)

    
    

视频刷新

canplay 视频已经准备好,可以开始播放

    

    

你可能感兴趣的:(html)