3-9. video标签

2017-11-10 本文已影响71人一Left一

1、作用: 播放视频
<video> 标签定义视频，比如电影片段或其他视频流。

2、第一种格式：
<video src=""></video>

3、video标签的属性

src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了- autoplay属性, 那么preload属性就会失效
muted:静音
width/height: 和img标签中的一模一样

<body>
<!--
    video : 用来播放视频
    属性:
    video标签的属性
    src: 用于告诉video标签需要播放的视频地址
    autoplay: 用于告诉video标签是否需要自动播放视频
    controls: 用于告诉video标签是否需要显示控制条
    poster: 用于告诉video标签视频没有播放之前显示的占位图片
    loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
    preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
width/height: 和img标签中的一模一样
-->
<video src="video/sb1.webm" poster="video/ff.png"></video>
</body>

图片.png

4、第二种格式：

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

5、第二种格式存在的意义:

由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

4、注意点:

当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

<body>
<!--
    video : 用来播放视频
    属性:
    video标签的属性
    src: 用于告诉video标签需要播放的视频地址
    autoplay: 用于告诉video标签是否需要自动播放视频
    controls: 用于告诉video标签是否需要显示控制条
    poster: 用于告诉video标签视频没有播放之前显示的占位图片
    loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
    preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
width/height: 和img标签中的一模一样
-->

<!-- 视频播放基本格式 -->

<!--<video src="video/sb1.webm" poster="video/ff.png"></video>-->


<!--
第2中指定视频播放源的方式,为了解决各大浏览器厂商对于视频格式支持不统一引起的问题
您必须把视频转换为很多不同的格式
嵌入网页的 ogg、mp4 或 webm 格式的视频
<video> 元素在老式浏览器中无效
<video> 元素无法通过 HTML 4 和 XHTML 验证
-->

<video controls>
    <source src="video/sb1.webm" type="video/webm">
    <source src="video/sb1.mp4" type="video/mp4">
    <source src="video/sb1.ogg" type="video/ogg">
</video>

图片.png

5、第三种：使用 <embed> 标签
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 代码显示嵌入网页的 Flash 视频：<embed src="movie.swf" height="200" width="200"/>效果展示
注意

如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

6、第四种：使用 <object> 标签
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 代码显示嵌入网页的 Flash 视频：<object data="movie.swf" height="200" width="200"/>效果展示
注意

如果浏览器不支持 Flash，将无法播放视频。
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

7、第五种：使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件：
<a href="movie.swf">Play a video file</a>
效果展示

8、最好的 HTML 解决方法：HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

效果展示

9、在 HTML 中显示视频的最简单的方法是使用优酷等视频网站
如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

效果展示

http://www.w3school.com.cn/tags/tag_video.asp
http://www.w3school.com.cn/html/html_video.asp
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

3-9. video标签

猜你喜欢

热点阅读