此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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> <button type="button">Load video</button> <video controls width="250"></video> <div> <label>Event log:</label> <textarea readonly></textarea> </div></div>.event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem;}.example { display: grid; grid-template-areas: "button log" "video log";}button { grid-area: button; width: 10rem; margin: 0.5rem 0;}video { grid-area: video;}.event-log { grid-area: log;}.event-log > label { display: block;}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 |