文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么将视频插入HTML页面中

2024-04-02 19:55

关注

这篇“怎么将视频插入HTML页面中”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么将视频插入HTML页面中”文章吧。

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg  Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE  9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面来认识HTML  5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件。

Video标签的使用

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性,   以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外,还可以包含当指定的视频都不能  播放时,返回的内容。

(1) src属性和poster属性

你能想象src属性是用来干啥的。跟<img>标签的一样,这个属性用于指定视频的地址。而poster属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。
 

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="/file/upload/202210/19/ji3lvslrujg.jpg" autoplay="autoplay"></video>

(2) preload属性

这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。
 

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="/file/upload/202210/19/ji3lvslrujg.jpg" autoplay="autoplay" preload="none"></video>

None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。

Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等)。

Auto:全部预加载。

(3) autoplay属性

又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉是表示不自动播放。

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="/file/upload/202210/19/ji3lvslrujg.jpg" autoplay="autoplay" preload="none"></video>

注意,HTML中布尔属性的值不是true和false。正确的用法是,在标签中使用此属性表示true,此时属性要么没有值,要么其值恒等于他的名字  (此处,自动播放为<video autoplay />或者<video autoplay=”autoplay”  />);而在标签中不使用此属性表示false(此处不进行自动播放为<video />)。

 (4) loop属性
 

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="/file/upload/202210/19/ji3lvslrujg.jpg" autoplay="autoplay" loop="loop"></video>

一目了然,loop属性用于指定视频是否循环播放,同样是一个布尔属性。

(5) controls属性
 

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="/file/upload/202210/19/ji3lvslrujg.jpg" autoplay="autoplay" preload="none" controls="controls"></video>

Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器启用本身的播放控制栏。

控制栏须包括播放暂停控制,播放进度控制,音量控制等等。

每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题,Firefox和Safari的Video标签不正常,所以这两个只能在网上找截图了。

(6) width属性和height属性

属于标签的通用属性了,这个不用多说。

(7) source标签
 

<video width="658"
 height="444" poster="/file/upload/202210/19/ji3lvslrujg.jpg" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用。

浏览器按source标签的顺序检测标签指定的视频是否能够播放(可能是视频格式不支持,视频不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义,不能单独出现。

此标签包含src、type、media三个属性。

src属性:用于指定媒体的地址,和video标签的一样。

Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

Media属性:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。你想到<style>标签的media属性了么?一样一样一样的。

(8) 一个完整的例子

<video width="658"
 height="444" poster="/file/upload/202210/19/ji3lvslrujg.jpg" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

这段代码在页面中定义了一个视频,此视频的预览图为poster的属性值,显示浏览器的默认媒体控制栏,预加载视频的元数据,循环播放,宽度为900像素,高度为240像素。

第一选择视频地址为第一个source标签的src属性值,视频类别为Ogg视频,视频编码译码器为Theora,音频编码译码器为Vorbis,播放媒  介为显示器;第二选择视频地址不再累述。如果你还要兼容IE的话,可以在最后一个source标签后再加上Flash播放器的标签集,或者使用一点  JavaScript代码。

以上就是关于“怎么将视频插入HTML页面中”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯