介绍

< video >元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

< source >元素为< picture >,< audio >或者< video >元素指定多个媒体资源

video标签常见属性

autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted 如果出现该属性，视频的音频输出为静音。
src 要播放的视频的 URL。

source标签常见属性

src 规定媒体文件的 URL。
type 规定资源的媒体类型

解释

source标签可以写多个，并指定type ,兼容不同浏览器解码支持。但src只能写一个
source标签的type属性的属性值有video/ogg，video/mp4，video/webm

代码及效果

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video autoplay muted controls loop src="../web(VS)/烟把儿 - 纸短情长.mp4"></video><video autoplay muted controls loop ><source src="../web(VS)/烟把儿 - 纸短情长.mp4" type="video/webm"></video></body>
</html>

效果:

video标签和source标签相关推荐

video/audio 音频/视频标签详解
video <video> 标签定义视频,比如电影片段或其他视频流. 可以在 <video> 和 </video> 标签之间放置文本内容,这样不支持 <vid ...
html video标签 mp3,html5中的video标签和audio标签详解
一.基础 src 音乐资源的路径 autoplay 播放 controls 控制面板 loop 循环播放 muted 初始静音 audio支持的音乐格式有mp3 ogg wav 你的浏览器太辣鸡了,不 ...
12.HTML基础——video标签和audio标签
文章目录 video标签 1.什么是video标签? 2.video标签的属性 2.1 src属性 2.2 autoplay属性 2.3 controls属性 2.4 poster属性 2.5 loo ...
html video添加字幕,HTML5标签：video元素的使用方法及作用
html元素标签是html5中新增的标签,用于定义网页文档中的视频资源文件,有关标签的使用方法及作用详解如下: 标签的定义标签可以把指定的视频资源文件插入页面中播放: 标签是 HTML 5 中新增的 ...
HTML5语音标签和作用,HTML5标签：source元素的使用方法及作用
html元素标签是html5中新增的标签,主要用于指定音频.视频.图片类型的媒体资源.有关标签的使用方法及作用详解如下: 标签的定义标签是为.和标签指定多个媒体资源,比如音频.视频.图片. 标签 ...
html5基础（网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单）
网页的基本信息 1.DOCTYPE声明文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码.DOCTYPE声明必须位于HTML文档第一 ...
音频和视频标签与其他标签
音频 <audio src="audios/XXX.mp3" controls="controls" autoplay="autopla ...
H5新特性 -音频视频标签（媒体标签）
音频视频标签常见媒体标签有:audio . video .source 实际上他们的控件都一样,这里以audio为例进行说明 controls: 用户控制界面(标签自带) autoplay: 自动播 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
html所有标签解释,HTML5所有标签汇总及标签意义解释
这篇文章主要介绍了HTML5所有标签汇总及标签意义解释,本文总结了结构标签.多媒体交互标签.Web应用标签.注释标签.其他标签等内容,需要的朋友可以参考下结构标签:(块状元素) 有意义的p arti ...

video标签和source标签

介绍

video标签常见属性

source标签常见属性

解释

代码及效果

video标签和source标签相关推荐

最新文章

热门文章