html5 video 加载状态,HTML5 Video标签的属性、方法和事件汇总介绍

本文介绍了HTML5 Video标签的详细使用,包括属性(如src、poster、preload等)、方法(如load、play、pause等)、事件(如loadstart、play、pause等)以及视频加载状态的解析,帮助开发者全面理解如何操作和控制HTML5视频播放器。
摘要由CSDN通过智能技术生成

前段时间写了一个基于html5 video的视频播放器,从起初的对其不了解,然后到能够写一个基本完善的自定义播放器。在这个过程中,对video标签的属性,方法,事件有了个全面的认识。下面分类列出来一下。

标签的属性

复制代码代码如下:

src :视频的属性

poster:视频封面,没有播放时显示的图片

preload:预加载

autoplay:自动播放

loop:循环播放

controls:浏览器自带的控制条

width:视频宽度

height:视频高度

html 代码

复制代码代码如下:

//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象

获取video对象

复制代码代码如下:

Media = document.getElementById("media");

Media方法和属性:

HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

复制代码代码如下:

Media.error; //null:正常

Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

//网络状态

- Media.currentSrc; //返回当前资源的URL

- Media.src = value; //返回或设置当前资源的URL

- Media.canPlayTyp

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值