多媒体标签

HTML5原生支持音视频播放，无需Flash等插件，通过video和audio标签实现。

视频标签video

基础用法

<video src="video.mp4" controls>
    您的浏览器不支持视频播放
</video>

核心属性

多源视频

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    您的浏览器不支持视频播放
</video>

preload预加载

音频标签audio

基础用法

<audio src="music.mp3" controls>
    您的浏览器不支持音频播放
</audio>

核心属性

多源音频

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持音频播放
</audio>

自动播放规则

大多数浏览器禁止有声自动播放，需要配合muted属性。

<!-- 有效：静音自动播放 -->
<video src="video.mp4" autoplay muted></video>

<!-- 无效：有声自动播放被阻止 -->
<video src="video.mp4" autoplay></video>

视频格式支持

video支持格式

audio支持格式

track字幕标签

<video src="video.mp4" controls>
    <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="英文">
</video>

嵌入外部媒体

iframe嵌入

<!-- YouTube -->
<iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen
></iframe>

<!-- Bilibili -->
<iframe
    src="https://player.bilibili.com/player.html?bvid=BV_ID"
    frameborder="0"
    allowfullscreen
></iframe>

embed/object标签

<embed src="video.mp4" type="video/mp4">
<object data="video.mp4" type="video/mp4"></object>

JavaScript控制

<video id="myVideo" src="video.mp4"></video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>

<script>
    const video = document.getElementById('myVideo');

    function playVideo() {
        video.play();
    }

    function pauseVideo() {
        video.pause();
    }

    // 获取视频状态
    console.log(video.currentTime);  // 当前时间
    console.log(video.duration);     // 总时长
    console.log(video.paused);       // 是否暂停
</script>

要点总结

1. controls必备：用户需要控制播放
2. autoplay配muted：自动播放必须静音
3. 多源格式：提供多种格式保证兼容
4. 兼容文本：标签内添加不支持提示