HTML5音视频播放

最新推荐文章于 2024-05-16 14:42:12 发布
最新推荐文章于 2024-05-16 14:42:12 发布
阅读量284 收藏
点赞数
分类专栏： ★ HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wozhangyi/article/details/106874956
版权

音视频，图片，内联框架都属于替换元素，src指定引入文件的路径

audio 标签 link

audio 标签用来向页面引入一个外部的音频文件
音视频文件引入时，默认不允许用户控制播放停止

常用属性

  • src 指定引入文件的路径
  • autoplay 如果出现该属性，则音频自动播放 (但目前大多浏览器都不会自动播放，为了用户体验)
  • controls 如果出现该属性，则向用户显示控件，否则不显示
  • loop 如果出现该属性，则每当音频结束时重新开始播放
  • muted 规定音视频静音

代码示例

<body>
<audio src="https://m701.music.126.net/20200620171827/db2930581c6b296e695b90ab719675b4/jdyyaac/0e58/035a/0e53/92bb9fb9c44071c1b597996867ca6c01.m4a" controls muted></audio>
<video src="https://vdept.bdstatic.com/6956556e48346d6b4168624d4c4d5965/6173616a6b654274/c9b7d06b1cd08ca7838ad9c5a5b293fa5d0c472c13f5907dd03985ba3c1fa3ab1fbc0b35fd97e3c31b7d8bf58e0572c0.mp4?auth_key=1592653290-0-0-47a632bd9a325897ca32f3a29cc79c74" controls></video>
</body>

video 标签

video和audio的用法一样，video标签可以设置播放器宽高

兼容性问题

以上两种用法在一些老版本浏览器中不兼容，如 IE8

除了通过src来指定引入文件的路径以外，还可以通过source来指定文件， embed可以在IE8播放

<body>
<audio controls muted>
    <source src="https://m701.music.126.net/20200620171827/db2930581c6b296e695b90ab719675b4/jdyyaac/0e58/035a/0e53/92bb9fb9c44071c1b597996867ca6c01.m4a">
    <source src="https://m701.music.126.net/20200620171827/db2930581c6b296e695b90ab719675b4/jdyyaac/0e58/035a/0e53/92bb9fb9c44071c1b597996867ca6c01.mp4">
    <embed src="https://m701.music.126.net/20200620171827/db2930581c6b296e695b90ab719675b4/jdyyaac/0e58/035a/0e53/92bb9fb9c44071c1b597996867ca6c01.m4a" type="video/mp3">
</audio>
<video src="https://vdept.bdstatic.com/6956556e48346d6b4168624d4c4d5965/6173616a6b654274/c9b7d06b1cd08ca7838ad9c5a5b293fa5d0c472c13f5907dd03985ba3c1fa3ab1fbc0b35fd97e3c31b7d8bf58e0572c0.mp4?auth_key=1592653290-0-0-47a632bd9a325897ca32f3a29cc79c74" controls></video>
</body>
路飞小朋友
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小项目实现：下载网易云某个歌单的全部音乐
pikapika_chu的博客
07-20 3448
第一步：用歌曲地址先实现一首歌的下载 利用： song_url （例如：https://m701.music.126.net/20190719164713/77733e070e7f9c68ac6ea23ee318ab2a/jdyyaac/520f/025e/5558/ee8797256554f32436eab2fab7f60f9a.m4a） 头文件 实现 把歌曲保存到本地指定的文件夹 思路 用两...
微信小程序授权登录和获取手机号功能（详细）
2401_83916355的博客
03-30 2354
请依次允许获得你的公开信息及手机号码请升级微信版本（四）index.wxss.header {.content {.operBtns{important;important;*/（三）index.jsPage({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。AuthorizedLogin: ‘授权登录’,
python 爬取网易云音乐歌单
weixin_44889138的博客
12-04 3227
Python 爬取网易云音乐 来自哔哩哔哩学习视频 爬取网易云音乐视频总结，也算是为自己记个笔记吧 所需库 requests 点击查看介绍 lxml 点击查看介绍 确定url地址 以谷歌浏览器 进入所需歌单，随便点首歌，右键，检查 找到network—XHR，如果没有内容，刷新一下，接下来可看到如图 可看到所需歌曲的url https://m801.music.126.net/2...
python爬虫基础(爬取一首网易云音乐歌曲)
最新发布
h091616的博客
05-16 1406
下一次会更新一次爬多首音乐（包括我们歌曲的名字一起爬下来）
you-get下载网络资源
Codernmx
06-06 224
首先通过pip安装 you-get（python 环境） pip install you-get 完成之后执行命令 you-get <url 网络资源地址> 例如 you-get https://m701.music.126.net/20210606170536/0877e3ed2402b599c9d2877000fa4afa/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/8929211894/5b82/6a78/08d8/db11ee3e8fd8710f894727cd
HTML 5 视频、音频播放
林彬的专栏
05-18 907
链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML视频</title> </head> <body> <h2>爱奇艺-奔跑吧</h2> <embed sr...
HTML5 video视频播放
大前端
07-30 9161
一、下面播报一则新闻 Chrome 70已经原生支持HTML5 <video>播放时候Picture-in-Picture，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。 我一瞅自己的Chrome浏览器，正好就是Chrome 70，体验了一番，挺有意思的，值得介绍下，以后估计用得着。 二、先看画中画实例demo 点击页面的切换按钮，或者右...
HTML5实现音视频播放器
07-19
HTML5是现代网页开发的关键技术之一，特别是在实现音视频播放方面。这个项目专注于创建一个功能齐全的网页版音视频播放器，它集成了多种高级功能，以提供优秀的用户体验。以下是对这个项目中涉及的主要知识点的详细...
使用HTML5在网页中嵌入音频和视频播放的基本方法
09-28
HTML5是现代网页开发中的一个关键...其中，和标签是HTML5的核心特性，它们为网页提供了原生的音频和视频播放能力，无需依赖像Flash这样的外部插件。 在网页中嵌入视频，我们可以使用标签。基础的用法如下： ```html ...
HTML5视频播放器美化
03-10
HTML5视频播放器是现代网页设计中的重要组成部分，它允许用户在无需插件或第三方软件的情况下直接在浏览器中观看视频内容。"HTML5视频播放器美化"是一个专注于提升播放器视觉效果和用户体验的主题。在HTML5中，我们...
jquery html5 视频播放控制代码
10-21
在现代网页开发中，HTML5引入了内置的视频播放功能，极大地提升了用户体验。`<video>`标签是HTML5中的一个核心元素，它允许我们在网页上直接嵌入视频内容。然而，为了实现更丰富的交互和控制，我们通常会借助...
HTML5音频视频
07-06
HTML5是现代网页开发的核心标准，它极大地扩展了Web应用的功能，特别是在音频和视频处理方面。HTML5引入了内置的 `<audio>` 和 `<video>` 标签，使得开发者无需依赖Flash或其他插件即可在网页中嵌入多媒体内容。这两...
H5页面播放M4a音频文件
fsw4848438的专栏
03-24 9561
最近业务处理有这样一个场景，手机app端录音，然后上传至后台服务器，前端从后台服务器获取录音，在PC端WEB页面播放。
html5 m4a,Audio Unit播放aac/m4a/mp3等文件
weixin_42504279的博客
07-01 1296
前言正文1、格式转换音频数据的格式转换包括采样率改变，单声道到多声道的转变、音调的升高降低等，audio unit有一个专门格式转换unit(kAudioUnitType_FormatConverter，type of 'aufc')。AudioUnit不支持vbr的数据，也不支持从一个有损压缩格式转换为pcm或者pcm转换为有损格式，对于有损格式的音频数据转换，需要用CoreAudio的Audi...
HTML5音视频播放(Video,Audio)和常见的坑处理
weixin_30542079的博客
06-27 1944
1. 前言背景 　　在HTML5出现之前，Web页面访问音视频主要是通过Flash，Activex插件，还有微软后来推出的silverlight来展现的，尽管FLASH曾经风靡全球，但是随着互联网的不断发展，进入移动时代以后，Flash的风头渐渐被HTML5替代，主要原因是Flash经常爆出漏洞，安全性令人担忧，性能方面较差，对网络浏览和设备的电池也消耗比较大等等，Flash天生就是为PC而生，...
克服 iOS HTML5 音频的局限
chisu1439的博客
02-22 511
简介 过去几年，开发人员一直都在制造完善的交互体验，努力使其可以在浏览器中正确运行。这样的站点通常需要使用浏览器插件 (Flash)。随着智能手机和平板电脑的推出，交互体验看似与新的小部件能够完美匹配。但是，由于移动设备的处理能力有限，浏览器插件不再是一种可行的开发平台。 常用的缩略语 ...
说说如何使用 HTML5 嵌入音频和视频（媒体标签）
热门推荐
读万卷书，行万里路
07-25 1万+
HTML5 使用 audio 和 video 元素来嵌入音频和视频内容。另外还提供了与这两个标签相关的 JavaScript API，这样就可以创建我们自己的音视频控件咯：<!-- 嵌入视频 --> <video id="player" src="xxx.ogg" poster="mymovie.jpg" width="300" height="200">
设计、编写程序,实现html5音视频播放的基本功能。调试、运行程序,观察、并记录结
05-15
为了实现HTML5音视频播放的基本功能，我们需要通过代码来完成。首先，我们需要在HTML中添加一个标签，并设置src属性为要播放的音视频文件的URL。另外，我们还可以设置一些标签属性，如宽度、高度、控件样式等。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值