javascript HTMLMediaElement

在这里插入图片描述

HTMLVideoElementHTMLAudioElement都是继承该类

属性

继承了HTMLElement, Element, Node, EventTarget

属性类型描述
audioTracksAudioTrackListtracks 声道,比如左声道和右声道
autoplayBoolean是否自动播放
bufferedTimeRanges
controllerMediaController
controlsBoolean
controlsListDOMTokenList
crossOriginDOMString
currentTimedouble用来控制声音和视频的时间,比如音频播放一端时间后,重置为0,从开始再次
defaultMutedBoolean
defaultPlaybackRatedouble
disableRemotePlaybackBoolean
duration
endedBoolean
errorMediaError
loopBoolean
mediaGroupDOMString
mutedBoolean
networkStateunsigned short
pausedBoolean
playbackRatedouble
playedTimeRanges
preloadDOMString
readyStateunsigned short
seekableTimeRanges
seekingBoolean
sinkIdDOMString
srcDOMString资源
srcObjectMediaStream
textTracksTextTrack
videoTracksVideoTrack
volumedouble音量0~1

方法

继承HTMLElement, Element, Node, and EventTarget.

方法类型描述
addTextTrack()
canPlayType()
fastSeek()
load()加载资源
pause()

事件

继承HTMLElement,可以使用addEventListener(),也可以使用下方所列

事件描述
abort
canplay
canplaythrough
durationchange
emptied
ended
error
loadeddata
loadedmetadata
loadstart
pause
play
playing
progress
ratechange
seeked
seeking
stalled
suspend
timeupdate
volumechange
waiting

参考:
HTMLMediaElement
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 中,可以使用 `HTMLMediaElement` 对象的 `currentTime` 属性和 `drawImage` 方法来获取视频的第一帧图片。具体步骤如下: 1. 创建一个 `video` 元素,并设置其 `src` 属性为视频的 URL: ```javascript let video = document.createElement('video'); video.src = 'path/to/video.mp4'; ``` 2. 监听 `loadedmetadata` 事件,确保视频已经加载了元数据信息: ```javascript video.addEventListener('loadedmetadata', function() { // 在这里获取第一帧图片 }); ``` 3. 创建一个 `canvas` 元素,设置其宽高为视频的宽高,并将视频的第一帧绘制到 `canvas` 中: ```javascript let canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); ``` 4. 将 `canvas` 转换为图片,可以使用 `toDataURL` 方法: ```javascript let img = new Image(); img.src = canvas.toDataURL(); ``` 完整的代码如下: ```javascript let video = document.createElement('video'); video.src = 'path/to/video.mp4'; video.addEventListener('loadedmetadata', function() { let canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); let img = new Image(); img.src = canvas.toDataURL(); document.body.appendChild(img); }); ``` 这样,就可以将视频的第一帧图片显示在页面上了。注意,如果视频较大,可能需要等待一段时间才能获取到第一帧图片。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值