【Web前端实操02】创建页面，在页面上完成视频与音频的播放

已于 2024-01-24 11:35:56 修改
阅读量505 收藏 8
点赞数 9
分类专栏： Web前端实操 文章标签： 前端 javascript 开发语言
于 2024-01-15 20:13:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45498824/article/details/135609818
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="movie.mp4" controls>
        您的浏览器不支持 video 标签。
    </video>
    <audio src="Euphoria.mp3" muted controls>
        您的浏览器不支持 audio 标签。
    </audio>
</body>
</html>

代码实现图片：

a493ce8626a248228ebc3fcb8f5b79ba.png

在做这个实操的时候，有关于音频，如果不加muted，就会导致音频的界面不出现，以下是音频的属性，让音频静音，然后显示播放按钮，界面上就会出现音频，并且播放会有声音，可以控制音量，至于视频，没有找到视频，只好虚构一个，作为一个界面摆在那里。

属性描述
src要播放的音频的URL
autoplay自动播放
controls显示控件,比如播放按钮
loop循环播放
muted输出被静音
preload页面加载的时候,自动预加载资源

source

 

墨倾许
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面音频播放
小二来一只葫芦
05-22 241
将下列代码放入js中，更改mp3路径，即可使用 new Audio("xxx/xxx/xxx.mp3").play();
前端音频播放
Roriring的博客
03-07 5845
js实现： var noticeAudio = "pub/audios/notice.mp3"; var audio = new Audio(noticeAudio); audio .play(); //播放 html5实现（具体参考官方文档）： 方式一： &lt;div class="wrap"&gt; &lt;audio autoplay="autop...
如何实现前端音频和视频播放
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-10 1004
);});});});});});});});});});});});});});});});});});});});});});});});const});});});});'myVideo';});});const});});});
js页面进入播放音频文件
李忠祥个人博客
12-26 2333
web前端-HTML-视频音频
jinchenpeng的博客
05-27 301
一、视频 二、音频
【前端与后端的桥梁】——信息化人员必备知识&面试宝典：SQL优化实战手册
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-31 1044
SQL优化是一门艺术，也是科学，需要不断实践与学习。作为前端开发者，理解SQL优化不仅能促进与后端团队的高效沟通，更能从数据层面提升前端应用的性能。在日常开发中，记得关注查询性能、利用索引、避免全表扫描，并时刻警惕SQL注入的风险。引发讨论：在你的项目中，遇到过哪些SQL优化的难题？或是有哪些独到的优化技巧愿意与大家分享？欢迎在评论区留言，我们一起探讨，共同进步！欢迎来到我的博客，很高兴能够在这里和您见面！
Web前端开发中级样题一理+实.zip
11-15
【标题】"Web前端开发中级样题一理+实.zip" 涵盖了Web前端开发的理论与实践，这是一份针对1+x Web前端开发技能等级考试的中期练习题目集合。1+x标准旨在衡量和提升学员在Web前端领域的专业技能，确保他们具备企业级...
1+X认证Web前端开发中级模拟题.docx
12-16
* 在HTML中，用于播放视频与音频文件的元素是 `<video>` 和 `<audio>` * 使用媒体查询时，媒体类型取值为 `screen` 代表用于电脑屏幕、平板电脑、智能手机等 * 在CSS中，box-shadow 属性可以设置外阴影且阴影在盒子...
2019年下半年Web前端开发初级理论考试附答案.pdf
12-01
Web 前端开发初级理论考试知识点总结 一、HTML 基础知识点 1. 块级元素（block-level element）：块级元素对宽和高生效，边距生效。 2. table 标签：table 是表格标签。 3. HTML5 新增特性：新增了语义化标签、...
1+x 证书 Web 前端开发中级理论考试（试卷 ).zip
05-16
【1+x 证书 Web 前端开发中级理论考试】是一项针对Web前端开发人员的专业资格认证，旨在评估和提升考生在网页设计与开发领域的技能和理论知识。这项考试涵盖了前端开发的核心技术，包括HTML、CSS、JavaScript以及...
Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap)-课后练习答案.zip
07-10
同时，HTML5支持多媒体元素如`<audio>`和`<video>`，无需插件即可直接在浏览器中播放音频和视频。此外，新增的表单控件如`<input type="date">`、`<input type="range">`等提高了用户体验。HTML5还引入了离线存储...
web 前端学习之制作网页视频
程序员小白的博客
12-14 5786
HTML引用视频文件时，运行没有画面解决方法如下文
个人电影网站web网页设计制作—— 影视公司5页 DIV+CSS制作 浮动布局
qq__3200628753的博客
01-04 459
网页作品编辑作品下载后可使用任意HTML编辑软件（如：`DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页） 网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
web前端：视频背景（铺满整个网页）
weixin_55439495的博客
03-10 3311
1：效果图： 其中每行相片都是来回滚动，背景为视频 2：代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带背景音乐的电子相册</title> <style type="text/css"> body { width:100%; height:100%; .
base64转blob类型如何显示在页面上
qq_44162778的博客
02-23 670
//urlData 传base64 //type 图片类型 传 “image/png” // 调用方法 图片放置的参数 = URL.createObjectURL(this.base64ToBlob(base64,“image/png”))； base64ToBlob(urlData, type) { let arr = urlData.split(’,’); let mime = arr[0].match(/????.*?);/)[1] || type; // 去掉url的头，并转化为byte let
前端播放录音
bao9701的博客
09-02 897
播放录音
html5 音频和视频（audio And video）
weixin_30920513的博客
09-29 514
1、音频和视频 Web 上的视频 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 视频格式 当前，video 元素支持三种视频格式： 格式 　　 IE 　　 Firefox 　　 Opera 　　Chrom...
HTML5页面播放音乐
热门推荐
呆瓜丶的菜鸟技术分享
10-10 2万+
H5页面播放音乐其实很简单，只需要用<audio>这个标签就行十分方便。 路径选在音乐所在位置就行了。 <audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio> 关于点击按钮音乐开启/停止播放的效果做了个简单的例子 <a class="p...
Web前端与移动开发基础视频教程：从入门到精通
"该资源是一套完整的Web前端与移动开发基础视频教程，涵盖了从操作系统设置、开发工具的安装与使用，到HTML、CSS和JavaScript的基础知识讲解，旨在帮助初学者全面掌握前端开发技能。视频包括了前端开发的定义、常用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值