html5 视频和音乐播放笔记

最新推荐文章于 2025-08-23 20:28:56 发布

weixin_34267123

最新推荐文章于 2025-08-23 20:28:56 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/215677/blog/50313

本文介绍如何使用HTML5的<video>标签在网页中嵌入视频。通过设置src属性指定视频源，利用controls属性添加播放控件，并可通过width和height属性调整播放器尺寸。此外，还介绍了如何为不同浏览器提供多种视频格式支持。

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

2019独角兽企业重金招聘Python工程师标准>>>

Html 5 视频播放：<!DOCTYPE HTML> <html> <body>         <video src="http://www.w3school.com.cn/i/movie.ogg" width="321" height="240" controls="controls">         your browser does not support the video tag.         </video> </body> </html>

                                                     ~             播放上面的代码就可以在网页中嵌入视频，src的内容是你视频的地址，controls=”controls”的作用是添加播放暂停和音乐的控件，可以通过width和height来设置大小。<video width="320" height="240" controls="controls">   <source src="movie.ogg" type="video/ogg">   <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> 好还可以通过设计一个视频控件多个音视频同时播放，只要在video标签中增加source来指定文件的地址和类型。

<video> 标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

HTML 5 全局属性

NEW：HTML 5 中新的全局属性。

属性	值	描述
accesskey	character	规定访问元素的键盘快捷键
class	classname	规定元素的类名（用于规定样式表中的类）。
contenteditable	true false	规定是否允许用户编辑内容。
contextmenu	menu_id	规定元素的上下文菜单。
dir	ltr rtl	规定元素中内容的文本方向。
draggable	true false auto	规定是否允许用户拖动元素。
dropzone	copy move link	规定当被拖动的项目/数据被拖放到元素中时会发生什么。
hidden	hidden	规定该元素是无关的。被隐藏的元素不会显示。
id	id	规定元素的唯一 ID。
lang	language_code	规定元素中内容的语言代码。语言代码参考手册。
spellcheck	true false	规定是否必须对元素进行拼写或语法检查。
style	style_definition	规定元素的行内样式。
tabindex	number	规定元素的 tab 键控制次序。
title	text	规定有关元素的额外信息。

音乐标签：

标签跟上面的video类似

<audio src="song.ogg" controls="controls"> </audio>

大家可以去http://www.w3school.com.cn/html5/html_5_audio.asp参考相应的文档

转载于:https://my.oschina.net/u/215677/blog/50313