博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTMl5视频播放
阅读量:4568 次
发布时间:2019-06-08

本文共 855 字,大约阅读时间需要 2 分钟。

不需要任何额外的浏览器视频播放插件

完全由浏览器自身实现视频的解码和播放

用法:<video src=“演唱会.mp4” controls></video>

属性:

  • src:视频的url地址

  • controls:显示视频的控制组件

  • autoplay:自动播放

  • preload:

  1. none:视频播放前,浏览器不会预选下载视频资源,当用户不点击播放时会节省带宽。

  2. metadata:视频播放前,浏览器不会下载视频资源,但会获取资源的元数据(视频大小、时间、格式等)

  3. auto:浏览器会根据实际情况动态决定。如:在wifi、3G、4G数据漫游等情况下,动态的加载方式

  • muted:静音播放

  • loop:循环播放

  • poster:设置视频的封面

  • width和height:视频的宽和高

视频文件的格式

  视频容器分为:视频编码、音频编码

  mp4    webm  ogg为常用的视频格式。

兼容所有的视频格式

  浏览器从上到下查找source元素,知道找到它能播放的一种为止

    <video>

      <source src="1.mp4">

      <soure src="1.webm">

      <source src="1.ogv">

      <p>对不起,您的浏览器不支持video标签</p>

    </video>

对于这里的每个source元素,浏览器都会加载视频文件的元数据。查看能不能播放,这个过程可能很耗费时间

<source src=1.ogv type=‘video/ogg; codecs="theora,vorbis" '>

  type:是一个可选的属性,这是想浏览器提供一个提示,帮助它确定能不能播放这种类型的文件

  video/ogg:这是视频文件的MIME类型,指定了容器的格式

  codecs:视频的解码器theora,编码器vorbis

  

 

 

 

 

 

 

  

 

转载于:https://www.cnblogs.com/xiaowie/p/9746780.html

你可能感兴趣的文章
大数据等最核心的关键技术:32个算法
查看>>
Maven多模块项目搭建
查看>>
Scala
查看>>
Android 中LinearLayout控件属性
查看>>
面向对象之多态性
查看>>
树状数组
查看>>
【2019.8.14 慈溪模拟赛 T1】我不是!我没有!别瞎说啊!(notme)(BFS+DP)
查看>>
多任务--进程 及 进程间通信
查看>>
多线程/多进程+QProgressBar实现进度条
查看>>
多任务(进程)案例----- 拷贝文件夹
查看>>
Kotlin的快速入门
查看>>
底层原理
查看>>
21. Merge Two Sorted Lists
查看>>
创建数组
查看>>
dict使用
查看>>
ASP.NET MVC的帮助类HtmlHelper和UrlHelper
查看>>
02_ListActive中响应事件 并LogCat输出
查看>>
doubleclick adx note
查看>>
Celery框架
查看>>
[c#]asp.net开发微信公众平台(4)关注事件、用户记录、回复文本消息
查看>>