html5插入视频及自定义功能

最新推荐文章于 2024-04-29 21:30:00 发布

河北颜良

最新推荐文章于 2024-04-29 21:30:00 发布

阅读量679

点赞数

分类专栏：视频文章标签： html5

本文链接：https://blog.csdn.net/zhe06/article/details/105738404

版权

视频专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里先说一说在插入视频前大家要知道的一些理论知识。

在HTML5出现以前，我们在网页中嵌入视频时，视频格式的多样性会导致兼容性和各种播放问题实现起来非常的麻烦。html5出现后，video元素支持多个 < source > 元素. < source > 元素可以连接不同的视频文件。

HTML5中：（ 重点：代码第一行< !DOCTYPE html>就是html5。）
< video> 和 < audio> 元素同样拥有方法、属性和事件。和元素的方法、属性和事件可以使用JavaScript进行控制。其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。

video插入音频

< video > 元素支持三种视频格式： MP4, WebM, 和 Ogg:

 <!DOCTYPE html>
<head>
     <meta charset="UTF-8">
     <title>视频</title>
 </head>
 <body>     
 		<video width="320" height="240" controls>
 							<!-- .mp4要和video/MP4对应 -->
 			<source src="mp4/20424.mp4" type="video/mp4">
  			<source src="ogg/20424.ogg" type="video/ogg">
  			<source src="webm/20424.webm" type="video/webm" />
		</video>
 </body>
</html>

属性	描述
autoplay	视频加载完后立刻播放
controls	显示控件
height	播放器的高度
width	播放器的宽度
loop	循环播放
muted	静音
poster	播放器播放前显示的图片（封面）
preload	视频在页面加载时进行加载，并预备播放，如果使用autoplay，这该属性无用
src	文件路径url

栗子：

<video src='mp4/20424.mp4' muted controls autoplay height='520' width="369" poster='img/touch.png'></video>

使用 < object > 标签，< object > 标签的作用是在 HTML 页面中嵌入多媒体元素。

<object data="20424.swf" />

< embed > 标签的作用是在 HTML 页面中嵌入多媒体元素。

<embed src="movie.swf" 、/>

HTML 5 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到元素。

<video controls="controls" autoplay="autoplay">
  <source src="url" type="video/mp4" />
  <source src="url" type="video/ogg" />
  <source src="url" type="video/webm" />
  <object data="url" >
    <embed src="url" />
  </object>
</video>

河北颜良

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5插入视频及自定义功能

在 HTML 中播放视频真不容易，要想学明白是不难就是知识比较杂，需要同学们认真看认真记。这里先说一说在插入视频前大家要知道的一些理论知识。在HTML5出现以前，我们在网页中嵌入视频时，视频格式的多样性会导致兼容性和各种播放问题实现起来非常的麻烦。html5出现后，video元素支持多个 < source > 元素. < source > 元素可以连接不同的视频文件。...
复制链接

扫一扫