第13课:HTML音频/视频

HTML 视频

<embed> 标签 下面的 HTML 代码显示嵌入网页的 Flash 视频:

<embed src=swf/"movie.swf" height="200" width="200"/>

<object> 标签 <object> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 代码显示嵌入网页的 Flash 视频:

<object data=swf/"movie.swf" height="200" width="200"/>

使用 HTML5 <video> 标签 <video> 是 HTML 5 中的新标签。
<video> 标签的作用是在 HTML 页面中嵌入视频元素。
以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频:

<video width="320" height="240" controls="controls">
<source src=other/"movie.mp4" type="video/mp4" />
<source src=other/"movie.ogg" type="video/ogg" />
<source src=other/"movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

问题: 1)您必须把视频转换为很多不同的格式。2)<video> 元素在老式浏览器中无效。3)<video> 元素无法通过 HTML 4 和 XHTML 验证。最好的 HTML 解决方法 HTML 5 + <object> + <embed>

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

上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。优酷解决方案在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。
如果您希望在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入优酷等视频网站提供的分享代码,如 HTML 代码即可播放视频:

<embed src=swf/v.swf" width="480" height="400" type="application/x-shockwave-flash">
</embed>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/455.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年1月18日 下午7:55
下一篇 2018年1月19日 下午7:34

99%的人还看了以下文章

  • 美观简洁的bootstrap 表单验证代码

    美观简洁的bootstrap 表单验证代码,如上图所示,点击登录按钮,在输入框下方显示错误提示信息 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>ipput</title> <!– 新 Bootstra…

    2020年2月9日
    3.7K0
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    2.1K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    2.5K0
  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    2.6K0
  • 第10课:外边距和内边距

    上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

    2020年2月25日
    2.2K0
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

    Heart(心形) #heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: “”; left: 50px; top: 0; width: 50px; height: 80px; b…

    2020年2月22日 网页制作
    4.2K0

发表回复

登录后才能评论