HTML5 学习笔记10-音频视频

最新推荐文章于 2025-06-04 16:58:57 发布

RonnyZhao

最新推荐文章于 2025-06-04 16:58:57 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： html 新手视频 audio video 音频

本文链接：https://blog.youkuaiyun.com/qq_19919127/article/details/54341768

学习笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用HTML5的audio和video标签实现网页上的音视频播放功能，并提供了示例代码。文中还推荐了FFmpeg作为编解码工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

audio定义声音；video定义视频；source规定多媒体资源可以是多个；control属性提供添加播放、暂停和音量控制

1、HTML5音频播放

    <audio src="fanwei.mp3" id="audioid">您的浏览器不支持</audio>
    <button onclick="play()">播放/暂停</button>
    <script>
        var a=document.getElementById("audioid");
        function  play(){
            if(a.paused){
                a.play();
            }else{
                a.pause();
            }
        }
    </script>

2、HTML5音频视频-编解码工具

3、HTML5视频播放

    <video  controls width="640px" height="480px">
        <source src="ad.ogv" type='video/ogg; codecs="theora, vorbis"'/>
        <source src="ad.webm" type='video/webm'>
        <source src="ad.mp4" type='video/mp4'>
        <p>Video is not visible, most likely your browser does not support HTML5 video</p>
    </video>