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

小明同学喊你学习啦

已于 2023-11-29 11:32:08 修改

阅读量659

点赞数

分类专栏：网页设计教学文章标签：音视频

于 2023-11-19 21:13:37 首次发布

本文链接：https://blog.csdn.net/weixin_43310774/article/details/134495737

版权

网页设计教学专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

参考代码如下

<!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()方法播放视频。
菜鸟教程视频标签介绍
 菜鸟教程音乐标签介绍

小明同学喊你学习啦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
制作含有音频、视频的网页

在JavaScript中，我们可以使用Audio和Video对象来控制音乐和视频的播放。在上面的示例中，我们使用了new Audio()创建了一个音乐对象，并使用play()方法播放音乐。同样地，我们使用document.getElementsByTagName(‘video’)获取了页面中的第一个视频元素，并使用play()方法播放视频。’标签来嵌入视频和音乐。如果浏览器不支持HTML5的视频和音频标签，我们可以在标签中添加元素，提供多个格式的媒体文件，以便浏览器选择最适合的格式进行播放。
复制链接

扫一扫