HTML5新特性|01 音频&视频

音频

1、Audio (音频)

HTML5提供了播放音频文件的标准

2、control(控制器)

control 属性供添加播放、暂停和音量控件

3、标签:

html 复制代码
<audio>  定义声音
<source> 规定多媒体资源,可以是多个
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频</title>
</head>
<body>
    <!-- <audio src="C:Users/Administrator/Videos/1.mp4" controls="controls">浏览器不支持</audio> -->
    <audio controls="controls">
        <!-- 一般浏览器都可以播放ogg文件,这样保证基本每个浏览器都能播放这段音频 -->
        <source src="../raw/1.mp4" >
        <source src="../raw/1.ogg" >
    </audio>
</body>
</html>

视频

1、video (视频)

HTML5 提供了展示视频的标准

2、control (控制器)

control属性供添加播放、暂停和音量控件

3、标签:

html 复制代码
<video>    定义声音
<source>   规定多媒体资源,可以是多个

4、属性:

width: 宽

height: 高

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频</title>

</head>
<body>
    <!-- ffmpeg.org -->
<!--    此标签格式 IE 不支持,如果要查看浏览器是否支持,可以在官网 w3school.com.cn 上阅读-->
<!--    另外,如何进行转码和转码之后如何进行使用可以在官网  ffmpeg.org 上阅读-->
    <!-- <video src="../raw/1.mp4" controls="controls" height="300px" width="300px">浏览器不支持</video> -->
    <video controls="controls" height="300px" width="300px">
        <source src="../raw/1.mp4" >
        <source src="../raw/1.ogg" >
    </video>

</body>
</html>
相关推荐
neon1204几秒前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy12 分钟前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
妮妮喔妮23 分钟前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J29 分钟前
webpack笔记
前端·笔记·webpack
Baklib梅梅1 小时前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
IT_陈寒1 小时前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端
Bling_Bling_11 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子1 小时前
JS实现丝滑文字滚动
前端·javascript·面试
oil欧哟2 小时前
🧐 我用 Vibe Coding 从 0 到 1 打造 AI 产品,上线一个月效果如何?有什么心得?
前端·产品·vibecoding
霍克itxt点top2 小时前
NestJS 入门到实战 前端必学服务端新趋势无密分享
前端