首页前端开发HTMLhtml5 视频和音乐播放笔记

html5 视频和音乐播放笔记

时间2024-01-26 10:44:02发布访客分类HTML浏览179
导读:收集整理的这篇文章主要介绍了html5教程-html5 视频和音乐播放笔记,觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 html 5 视频播放:...
收集整理的这篇文章主要介绍了html5教程-html5 视频和音乐播放笔记,觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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 规定元素中内容的语言代码。语言代码参考手册asp"> http://www.w3school.com.cn/tags/html_ref_language_codes.asp 

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参考相应的文档

 

摘自  温昌寿2
 

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 规定元素中内容的语言代码。语言代码参考手册asp"> http://www.w3school.com.cn/tags/html_ref_language_codes.asp 

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参考相应的文档

 

摘自  温昌寿2
 

觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

标签跟上面的video类似 <audio src="song.ogg" controls="controls"></audio>大家可以去http://www.w3school.com.cn/ClassdivHTMLhtml5post-format-gallery

若转载请注明出处: html5 视频和音乐播放笔记
本文地址: https://pptw.com/jishu/586656.html
HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage HTML5 Canvas编写五彩连珠(6):试玩

游客 回复需填写必要信息