美文网首页
HTML部分

HTML部分

作者: 白夜前端 | 来源:发表于2020-05-15 18:25 被阅读0次

[HTML5音视频]

这里只介绍HTML5在音视频部分新添加的标签的基本用法。

视频

video标签

基本信息

video标签是HTML5新添加的标签,用来放视频文件,其中可以支持的文件格式包括mp4webmogv

作为标签,video内部可添加文字,这些文字只有在不支持video标签/不支持视频格式的时候显示

浏览器支持

各大主流浏览器中,FirefoxChrome支持以上三种文件格式的视频,只是控制菜单有些不同

safari只认mp4

IE8及以下不支持video标签,以上的只认mp4

常用属性

src:视频的路径,最重要的属性,必需

controls:视频播放的控制台,如果缺失只有视频的第一帧,必需

width/height:视频的长宽,必须是按照源文件的大小等比例缩放,如果同时设置,只会让播放器宽高拉伸,而视频内容始终在中心

autoplay:设置视频是否自动播放,Chrome下必需点击播放的按钮才可播放

loop:设置视频是否在播放结束后自动从头重新播放

poster:视频刚加载未播放时显示的图片,也是设置一个图片,否则停在视频第一帧,中途暂停或者倒回到开头无效

muted:设置视频播放是否为静音,这个属性同autoplay同时存在时,可以解决Chrome无法自动播放的bug

source标签

source标签可定义在video内部,可添加src属性,同样也表示视频文件的路径,但video里的src属性优先度高于source的

如果第一个标签的视频播放失败,继续看下一个source标签的视频是否可以正常播放,直至最后一个

相关文章

  • HTML部分

    引入样式,使用什么标签? HTML有三种样式引入方式:行内样式、嵌入式样式表、外部样式表。 行内样式又称内联表单样...

  • HTML部分

    一、HTML介绍 1.1HTML和CSS的关系 JavaScript肌肉 定义了网页的行为 HTML骨架 定义了网...

  • HTML部分

    [HTML5音视频] 这里只介绍HTML5在音视频部分新添加的标签的基本用法。 视频 video标签 基本信息 v...

  • css控制图片不改变原比例居中显示,图片超出div部分隐藏

    html部分 css部分 点击查看大图html部分 css部分

  • html部分笔记

    ol li 表示有序列表 如: 这是一个有序列表 dl dt dd表示自定义列表 如: 每个自定义列表...

  • HTML部分标签

    iframe frameborder属性 0 取消边框 name属性 嵌入的浏览上下文(框架)的名称。该名称可以用...

  • CSS3实现旋转陀螺及灯光文字阴影动画

    旋转陀螺 html部分: css部分: 灯光文字阴影动画 html部分: css部分: js部分:

  • vue.js 练习

    1.购物车加减效果 html部分 js部分 2.添加删除效果 html部分 js部分 3.选项卡 html部分 js部分

  • js请假天数计算

    HTML部分: JS部分: var beginDate; var endDate;...

  • 移动端nav固定在顶部

    实例代码: html部分: css部分: html{ height:100%; overflow:hidden; ...

网友评论

      本文标题:HTML部分

      本文链接:https://www.haomeiwen.com/subject/zslhohtx.html