HTMLembed、播放音频audio、video

本文介绍如何在网页中嵌入音频和视频,包括使用embed、audio和video标签的方法。探讨了本地存储与第三方平台如优酷的优缺点,以及实现自动播放、循环播放和跨浏览器兼容性的技巧。

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

有时候经常会在网站上面放一些音频和视频。

多媒体标签

embed:标签定义潜入的内容
audio:播放音频
video:播放音频
在本地是不提倡放视频的,用手机录视频会很大,而网站的容量是有限的。网站上传到服务器上是很贵的。1个G就要几百块钱。拍3-5个小视频就满了。
最常用的是把视频传到优酷上面,然后去调用优酷里面的地址。这样既不占用网站的空间,又能显示视频,一举两得。

多媒体embed

在优酷上找个视频。然后复制他的通用代码。
把代码复制到html中的body中,就可以。
不过这个是有优酷的广告的。

播放音频audio

在这里插入图片描述
就相当于背景音乐。
直接在代码body中加入<audio src=""></audio>
这个默认的是不自动播放的。自动播放的话就是加个autoplay属性。这个autoplay也可以向前面的属性一样,用两种方式。一个是直接加<audio src="" autoplay></audio>还有一个是<audio src="" autoplay="autoplay"></audio>
使用controls来控制。效果如下图:(可以控制播不播放,还有音量的大小)
在这里插入图片描述
使用loop属性可以循环播放。loop=“2"就是循环两次播放,… 当loop=”-1"或者是直接写个loop时时,就是无限循环播放。
这个小节第一张图就是兼容问题。可以把一个音频转换成3个格式。把3个格式都加上去,就都可以播放。
为了浏览器兼容,需要做三种。其实做两种就可以 ,一个是ogg,一个是MP3.
多浏览器支持的方案,如下图:
在这里插入图片描述

播放视频video

H5通过标签来解决音频播放的问题。语法格式如下:

<video src="" ></video>

通过附加属性可以更友好的控制视频的播放。

在这里插入图片描述
代码实例如下:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值