美文网首页H5
【前端学习笔记】HTML5中的video和audio

【前端学习笔记】HTML5中的video和audio

作者: 花上 | 来源:发表于2018-11-13 19:00 被阅读10次

<audio>标签定义声音,比如音乐或者其他音频流。

<video>标签定义视频,比如电影片段或其他视频流。


video 和 audio 的优点:

都不需要第三方插件就能播放音频和视频,可以直接插入,并且用同一的API接口控制。

video 和 audio 的缺点:

1)暂时没有对流视频的支持和规范。流媒体分HTTP渐进式下载和实时流式传播,video 和 audio 属于HTTP属于渐进式下载,不需要流媒体服务器,普通HTTP服务器就可以。

2)播放媒体类型不统一。由于各种原因,HTML5没有对播放媒体类型做规定,这可以通过source来改进,如果不支持播放第一个文件就播放下一个,一次类推。

3)资源受跨域共享的限制。跨域的媒体数据需要统统下载到本地服务器。

4)全屏无法通过脚本控制。从安全性角度来看,让脚本元素控制全屏操作是不合适的。不过,如果要让用户在全屏方式下载播放视频,浏览器可以提供其他控制手段。


<audio> 标签属性

src : 音乐的URL

preload : 预加载

autoplay : 自动播放

loop : 循环播放

controls : 浏览器自带的控制

<audio> 标签属性

src : 视频的URL

poster : 视频封面,没有播放时显示的图片

preload : 预加载

autoplay : 自动播放

loop : 循环播放

controls : 浏览器自带的控制条

width : 视频宽度

height : 视频高度

相关文章

  • 【前端学习笔记】HTML5中的video和audio

  • html5影音多媒体(video和audio)的简单介绍

    video元素与audio元素 1、video元素与audio元素的基础知识video元素--在HTML5中专门用...

  • HTML5的新特性

    HTMl5中的部分有趣的新特性: canvas: 用于绘画(很厉害,只是学习成本高) video和audio: 用...

  • 关于HTML5的audio标签和video标签删除下载图标

    关于HTML5的audio标签和video标签删除下载图标 - a+b!=c - 博客园 设置css video:...

  • HTML5拓展笔记

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元...

  • HTML5学习笔记

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元...

  • HTML5

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元...

  • html5,css3新特性

    html5: 用于绘画的 canvas 元素 以及SVG 用于媒介回放的 video 和 audio 元素 拖拽(...

  • H5视频播放

    html5新增了音频/视频(audio/video)的API。这次我们先来了解video。video 元素支持三种...

  • audio 与 video

    HTML5增加了audio(音频)和video(视频)两个标签,不用再像以前那样使用插件去播放音频和视频audio...

网友评论

    本文标题:【前端学习笔记】HTML5中的video和audio

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