HTMLMediaElement: loadstart event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
loadstart 事件当浏览器开始载入一个资源文件时 fired.
| Bubbles | No |
|---|---|
| 可撤销 | No |
| Interface | Event |
| Event handler property | onloadstart |
Examples
Live example
HTML
html
<div class="example"> <button type="button">Load video</button> <video controls width="250"></video> <div class="event-log"> <label>Event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> JS
js
const loadVideo = document.querySelector("button"); const video = document.querySelector("video"); const eventLog = document.querySelector(".event-log-contents"); let source = null; function handleEvent(event) { eventLog.textContent = eventLog.textContent + `${event.type}\n`; } video.addEventListener("loadstart", handleEvent); video.addEventListener("progress", handleEvent); video.addEventListener("canplay", handleEvent); video.addEventListener("canplaythrough", handleEvent); loadVideo.addEventListener("click", () => { if (source) { document.location.reload(); } else { loadVideo.textContent = "Reset example"; source = document.createElement("source"); source.setAttribute("src", "/shared-assets/videos/flower.webm"); source.setAttribute("type", "video/webm"); video.appendChild(source); } }); Result
Specifications
| Specification |
|---|
| HTML # event-media-loadstart |
| HTML # handler-onloadstart |
Browser compatibility
Loading…