Nginx+ffmpeg 搭建流媒体服务器（一）：video属性和事件

最新推荐文章于 2025-04-24 16:09:12 发布

Marhal

最新推荐文章于 2025-04-24 16:09:12 发布

阅读量1.4k

点赞数

分类专栏： Nginx+ffmpeg流媒体服务器文章标签：流媒体服务器 ffmpeg nginx+ffmpeg 监听video

本文链接：https://blog.youkuaiyun.com/qq_38157006/article/details/106541360

版权

Nginx+ffmpeg流媒体服务器专栏收录该内容

4 篇文章

订阅专栏

本文详细解析HTML5 Video API的属性与事件，包括音量控制、播放时间调整、视频地址切换及多种监听事件，如加载开始、播放就绪、流畅播放等，为开发者提供全面的视频操作指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、video属性

基础的属性就不介绍了，略微说几个

post 贴图
controller 控制条
controllerlist=’nodownload’ 禁止下载
controllerlist=’nofullscreen’ 禁止放大
src 地址
autoplay 自动播放
muted默认静音
loop循环播放
preload 预加载。视频在页面加载时进行加载，并预备播放如果使用 “autoplay”，则忽略该属性

二、video基础事件

控制音量

var V= document.getElementById(‘video’);
V.volume=0.5;

播放时间控制

var time = V.currentTime;//读取当前时间单位s
V.currentTime = 60;//设置时间到60

切换视频地址

var src = V.src;//获取当前视频地址绝对路径
V.src=’xxx.mp4’//设置视频地址

备用地址切换

<html>
<body>
<video>
	<source src=’1.x.mp4’ type=’video/mp4’>
	<source src=’2.x.mp4’ type=’video/mp4’>
	<source src=’3.x.mp4’ type=’video/mp4’>
</video>
<script>
	var src =V.currentSrc 获取当前播放的视频地址
</script>
<body>
</html>

三、监听事件

首先获取video标签

var V= document.getElementById(‘video’);

loadstart：视频开始加载事件

V.addEventListerner(‘loadstart’,function(e){
	//视频开始加载
});

durationchange ：视频发生时长变化

V.addEventListerner(‘durationchange’,function(e){
	//视频发生时长变化
	//video初始化时是NaN
	console.log(V.duration);//当前时间点
});

loadedmetadata：视频源数据已经下载完成

V.addEventListerner(‘loadedmetadata’,function(e){
	//视频源数据已经下载完成
});

loadeddata：视频源数据已经下载完成，但是没有足够的数据播放下一帧数据

V.addEventListerner(‘loadeddata’,function(e){
	//视频源数据已经下载完成，但是没有足够的数据播放下一帧数据
});

progress：视频和音频正在下载[预加载]

V.addEventListerner(‘progress’,function(e){
	//视频和音频正在下载[预加载]
});

canplay：视频可以播放

V.addEventListerner(‘canplay’,function(e){
	//视频可以播放了，有帧可以播放[可以调用play]
});

canplaythrough：视频可以流畅播放

V.addEventListerner(‘canplaythrough’,function(e){
	//视频可以流畅播放[可以调用play]
});

play： (点击)播放视频

V.addEventListerner(‘play’,function(e){
	//(点击)播放视频
});

pause：点击暂停视频

V.addEventListerner(‘pause’,function(e){
	//点击暂停视频
});

seeking：点击进度条的某个位置

V.addEventListerner(‘seeking’,function(e){
	//点击进度条的某个位置
});

seeked：点击进度条的某个位置事件触发结束

V.addEventListerner(‘seeked’,function(e){
	//点击进度条的某个位置 事件触发结束
});

waiting： ‘等待’ 事件

V.addEventListerner(‘waiting’,function(e){
	//下载数据中、预加载失败会触发 ‘等待’ 事件
});

playing：正在播放中

V.addEventListerner(‘playing’,function(e){
	//正在播放中
});

timeupdate ：播放时间更新

V.addEventListerner(‘timeupdate’,function(e){
	//播放时间更新
});

ended 播放结束

V.addEventListerner(‘ended’,function(e){
	//播放结束，先触发暂停
});

error：视频错误

V.addEventListerner(‘error’,function(e){
	//视频错误，会先重试n次然后触发error 再触发pause再触发ended
});