当前位置: 首页 > news >正文

制作含有音频、视频的网页

参考代码如下

<!DOCTYPE html>
<html>
<head><title>视频音乐网页</title>
</head>
<body><!-- 视频 --><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video><!-- 音乐 --><audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg">Your browser does not support the audio tag.</audio><!-- JavaScript --><script>// 播放音乐var audio = new Audio('music.mp3');audio.play();// 播放视频var video = document.getElementsByTagName('video')[0];video.play();</script>
</body>
</html>

使用了‘<video>’和‘<audio>’标签来嵌入视频和音乐。controls属性可以让用户控制媒体的播放、暂停、音量等。如果浏览器不支持HTML5的视频和音频标签,我们可以在标签中添加元素,提供多个格式的媒体文件,以便浏览器选择最适合的格式进行播放。

在JavaScript中,我们可以使用Audio和Video对象来控制音乐和视频的播放。在上面的示例中,我们使用了new Audio()创建了一个音乐对象,并使用play()方法播放音乐。同样地,我们使用document.getElementsByTagName(‘video’)获取了页面中的第一个视频元素,并使用play()方法播放视频。
菜鸟教程视频标签介绍
菜鸟教程音乐标签介绍

http://www.lryc.cn/news/236021.html

相关文章:

  • QPair的介绍及用法
  • 掌握未来技术趋势,Python编程引领人工智能时代
  • 【自留地】后端 - PHP - MySQL - Nginx - Python - Java
  • 网页视频下载工具 iTubeGo mac中文版软件特色
  • 深度学习入门(第三天)——卷积神经网络
  • 【Unity小技巧】图片使用的一些常见问题
  • ZJU Beamer学习手册(二)
  • Shaderlab的组成部分SubShader
  • C语言 字符函数汇总,模拟实现各字符函数(炒鸡详细)
  • 微积分在神经网络中的本质
  • CentOS部署Skywalking
  • window上Clion配置C++版本的opencv
  • FPGA时序分析与约束(14)——虚拟路径
  • 【Python】解析CPP类定义代码,获取UML类图信息
  • Docker存储驱动之- overlay2
  • Vue3 shallowRef 和 shallowReactive
  • Python数据分析实战① Python实现数据可视化
  • ASP.NET 开发几个知识点
  • 企业微信H5开发遇到的坑
  • mysql使用--分组查询
  • Android网络模块基本实现步骤
  • Rust6.2 An I/O Project: Building a Command Line Program (mini_grep)
  • 云轴科技ZStack信创云平台支撑长江航务管理局35套航运管理系统
  • Canal+Kafka实现MySQL与Redis数据同步(一)
  • 集合的运算
  • 在MySQL上实现间隔5分钟汇总取数及相关字符串、时间处理方法实践
  • 什么是AIGC
  • 〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点
  • GitHub Universe 2023:AI 技术引领软件开发创新浪潮
  • 数据结构:红黑树的插入实现(C++)