HTML之音视频

原创 2012年03月24日 21:07:26

1:视频

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

  <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

2:视频格式

   

           video元素支持的创建视频格式和对于不同视频格式的浏览器支持

视频格式

IE

Firefox

Opera

Chrom

Ogg

NO

3.5

10.5

5.0

H.264

9.0

NO

NO

5.0

MPEG-4

9.0

NO

NO

5.0

WebM

9.0*

4.0

10.6

6.0


Ogg是带有Thedora视频编码和Vorbis音频编码的Ogg文件

H.264是带有H.264视频编码和AAC音频编码的视频文件

MPEG-4是ISO/IEC标准的视频、音频编码标准,通常也是mp4文件

WebM是Google提出的标准,实际上就是VP8视频编码加上Vorbis,IE仅在安装了VP8解码器时才会支持WebM视频


属性:

属性

描述

autoplay

autoplay

如果出现该属性,则视频在就绪后马上播放。

controls

controls

用来设置是否为视频添加控件,如播放、暂停、进度条、音量等,如果视频播放器的宽度无法展开控件的长度,那么就会仅显示”播放”、”暂停”两个控件,控制条的外观可以自定义

height

pixels

设置视频播放器的高度。

loop

loop

如果出现该属性,则当媒介文件完成播放后再次开始播放。

preload

preload

用于定义视频是否预加载,属性有3个可选择的值:none, metadata和auto,默认为auto

(1)     none: 不进行加载,使用此属性值,可能是网页创建者期望用户并不太需要此视频,或者为了减少HTTP请求以降低服务器负载。

(2)     metadata:部分预加载。使用此属性值,可能是网页创建者期望用户并不太需要此视频,但为用户提供一些元数据(包括尺寸、第一帧、曲目列表和持续时间)

(3)     auto:全部预加载。要求浏览器首先把加载视频放在重要的位置,不要关心服务器负载。

如果定义了autoplay, 则忽略该属性

src

url

要播放的视频的 URL。



3:音频

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>音频</title>
</head>

<body>
   <audio src="老男孩.mp3" controls="controls">
       您的浏览器不支持HTML5音频功能呢个
   </audio>
</body>
</html>


相关文章推荐

Android Multimedia框架总结(十)Stagefright框架之音视频输出过程

前言:上篇文中最后介绍了数据解码放到Buffer过程,今天分析的是stagefright框架中音视频输出过程: 先看下今天的Agenda: - 一张图回顾数据处理过程 - 视频渲染器构建过程 - 音...

iOS开发之音视频边下边播缓存方案

阿勒,没想到第一篇文章我就标题党了... 不过,我还真没看到目前有哪个公开的实现方案有做的更好的,可能是我孤陋寡闻,如果你知道更好的方案,一定要留言告诉我,鞠躬.. 进入正题,这次的主要内容  ...
  • hmh007
  • hmh007
  • 2017年04月10日 10:53
  • 1104

iPhone开发之音视频的播放——MPMoviePlayerViewController和AVAutoPlayer的使用

新建工程,添加音视频框架  编辑控制器的.h文件如下: // // ViewController.h // 音视频预习 // // Created by apple on 15/9/4. // ...

FFmpeg之音视频相关概念

音视频参数码流 / 码率 / 比特率 / 帧速率 / 分辨率 / 高清的区别 http://blog.csdn.net/xiangjai/article/details/44238005音视频流程 ...

从零开始学习音视频编程技术(八)FFMPEG Qt视频播放器之音视频同步

从零开始学习音视频编程技术(八) FFMPEG Qt视频播放器之音视频同步 分享到:QQ空间微信新浪微博腾讯微博人人网 时间:2016年09月12日 人气:1094 前面...

从零开始学习音视频编程技术(八) FFMPEG Qt视频播放器之音视频同步

原文地址:http://blog.yundiantech.com/?log=blog&id=11 前面分别讲解了: 用FFMPEG和Qt解码视频并显示到界面上。 用F...

HTML5 获得音视频播放

GetUserMedia实例 //获得控制音视频的浏览器兼容写法 var userMedia = (navigator.getUserMedia||navigator.webk...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML之音视频
举报原因:
原因补充:

(最多只允许输入30个字)