文档章节

html5 音频和视频(audio And video)

柠檬酷
 柠檬酷
发布于 2015/10/08 14:36
字数 1594
阅读 99
收藏 5

1、音频和视频

 Web 上的视频

直到现在,仍然不存在一项旨在网页上显示视频的标准。

今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式

当前,video 元素支持三种视频格式:

格式    IE Firefox Opera Chrome Safari

Ogg     No 3.5+ 10.5+  5.0+ No

MPEG4 9.0+  No           No 5.0+ 3.0+

WebM  No     4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Web 上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

音频格式

当前,audio 元素支持三种音频格式:

IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg Vorbis     √ √ √

MP3 √ √     √

Wav      √ √ √

简单的video元素创建

        您的浏览器不支持video元素

视频默认的大小是300*150controls:显示视频的默认的控件

video标签的使用(带字幕文件)

 
        
        
        您的浏览器不支持html5 video
WEBVTT100:00:00.240 --> 00:00:04.130大家好 最近 Visual Studio 2013 做了一些更新200:00:04.140 --> 00:00:08.110那我们今天请到 twMVC 的 Dino来为我们介绍这个更新里面关于 SASS Editor 的部分300:00:18.120 --> 00:00:19.280

audio元素创建

<audio controls src="http://www.w3school.com.cn/i/song.mp3"></audio>

controls:显示通用的用户控件,包括开始,停止,跳播,以及音量控制

audio source元素

        
        

source提供多个音频元素,供浏览器自身播放能力自动选择,如果支持的不知一种,浏览器会选择第一个来源。

媒体的控制 自动播放

        
        您的浏览器不支持audio

autoplay:设置音频自动播放

2、可脚本话的视频和音频

判断浏览器支持情况
  
         hasVideo = !!(document.createElement().canPlayType);
js中控制音频或者视频的内置的方法
load()        加载音频或者视频文件,为播放做准备。通常情况下不需要调用,除非是动态创建的的元素,用来在在播放前加载
         play()        加载(如果还未加载完成)并播放音频或视频文件,除非音频或视频已经暂停在其他位置了,否则从头开始
         pause()        暂停处于播放的视频或者音频文件
         canPlayType(type)  试video元素是否支持给定MIME类型的文件
js中控制音频或者视频的内置只读属性
     duration    整个媒体文件的播放时长,以s为单位,如果无法获取时长返回
        paused        如果媒体文件当前被暂停,则返回,如果还未开始播放也返回
        ended        如果媒体文件已经播放完毕。返回
        startTime    返回最早的播放起始时间,一般是,除非是从缓冲过的文件,并且一部分已经不在缓冲区了!
        error        在发生错误的时候返回的错误代码
        currentSrc    以字符串的形式返回当前正在播放的或已经加载的文件,对应于浏览器就是source选择的文件
js中可被脚本修改并影响播放的部分媒体元素的特性
     autoplay        将媒体文件设置为创建后自动播放,或者查询是否已经设置autoplay
        loop            如果媒体文件已经播放完毕后能重新播放则返回,或者媒体将媒体文件设置为循环播放
        currentTime        以s为单位返回从开始播放到现在所用的时间,在播放过程中,设置currentTime来进行搜索,并定位到媒体文件特定的位置
        controls        显示或隐藏用户控制界面,或者查询用户控制界面当前是否可见
        volume            在0.0到1.0之前设置音频音量的值,或者查询当前音量的相对值
        muted            为音频文件设置静音或者消除静音,或者检测当前是否为静音
        autobuffer        通知播放器在媒体文件开始播放前是否进行缓冲加载,如果媒体文件设置autoplay,则忽略该属性
video元素的额外特性
    poster                    在视频加载完成之前,代表视频内容的图片的url地址,该属性可读可写,可以随意修改
        width,height             取或设置显示的尺寸。如果设置的宽度与视频本身大小不匹配,可能导致四周会出现黑色区域
        videoWidth,videoHeight   返回视频固有的宽度和高度,只读

3、html5通过canvas抓取视频(实例演示)

<!doctype html><meta charset="utf-8"><html>  <title></title>  <body>    <video id="movies" src="test.mp4" controls="controls" autobuffer="true" oncanplay="startVideo()" onended="stopTimeLine()" width="1920px" height="758px">    </video>    <canvas id="timeLine" width="1920px" height="758px">    </canvas>  </body>  <script>	    var updataInterval = 100;//抓取帧的时间间隔    var frameWidth = 1920;//时序中帧的尺寸    var frameHeight = 758;    //时序中总的帧数    var frameRows = 4;    var frameColumns = 4;    var frameGrid = frameRows*frameColumns;     //当前帧    var frameCount = 0;    //播放完取消计时器    var intervalid;    var videoStart = false;    //添加updateFrame函数    function updateFrame(){      var video = document.getElementById('movies');      console.log(video.videoWidth);      console.log(video.videoHeight);      var timeline = document.getElementById('timeLine');      var cxt = timeline.getContext('2d');      //根据帧数计算出当前播放的播放的位置      //然后以视频为输入参数绘制图像      var framePos = frameCount%frameGrid;      var frameX = (framePos%frameColumns)*frameWidth;      var frameY = (framePos%frameRows)*frameHeight;      cxt.drawImage(video,0,0,1920,758,frameX,frameY,frameWidth,frameHeight);      frameCount++;    }    function startVideo(){      if(videoStart){        return;      }      videoStart = true;      updateFrame();      intervalId = setInterval(updateFrame,updataInterval);    }    //处理用户输入    var timeLine = document.getElementById('timeLine');    timeLine.onclick = function(evt){      var offX = evt.layerX - timeLine.offsetLeft;      var offY = evt.layerY - timeLine.offsetTop;      var clickedFrame = Math.floor(offY/frameHeight)*frameRows;        clickedFrame += Math.floor(offX/frameWidth);	
      var seekedFramed = (((Math.floor(frameCount/frameGrid)*frameGrid)) + clickedFrame);      if(clickedFrame > (frameCount%16)){        seekedFramed = frameGrid;      }      if(seekedFramed < 0){        return;      }      var video =  document.getElementById('movies');      video.currentTime = seekedFramed*updataInterval/1000;      frameCount = seekedFramed;    }    function stopTimeLine(){      clearInterval(intervalId);    }  </script></html>

html5的audio和video元素的引入,让html5在媒体选择上可以不需要通过引入插件的形式来播放音频和视频文件,此外音频和视频的集成API方法也可以方便我们控制音频和视频!

本文转载自:http://www.cnblogs.com/shizhouyu/p/4845989.html

柠檬酷
粉丝 4
博文 67
码字总数 3040
作品 0
西安
私信 提问
HTML5 面试中最常问到的 10 个问题

1. HTML5 新的 DocType 和 Charset 是什么? HTML5 现在已经不是 SGML 的子集,DocType 简化为: HTML 5 指定 UTF-8 编码的方式如下: 2. 如何在 HTML5 页面中嵌入音频? HTML 5 包含嵌入音频...

oschina
2013/10/11
12.3K
17
15 免费的 HTML5 的视频和音频播放器

HTML5 audio 已经成为在线显示视频和音频的新标准,支持 Firefox、Safari 和 Chrome 浏览器。本文提供 15 个免费的强大的 HTML5 音频和视频播放器。 Vimeo Blip.tv SublimeVideo JW Player F...

oschina
2012/06/27
5.3K
4
微信小程序 Html2Wxml4J 0.95 更新,支持 Video 和 Audio 解析

html2wxml4J是微信小程序前端html渲染组件html2wxml的后台接口Java版 本次更新内容: 【新增】Video视频标签解析 支持html5中Video标签大部分属性 支持自动播放 支持静音播放 【新增】Audio...

山东-小木
2018/08/07
2.1K
3
好程序员前端分享HTML5 发展史

  好程序员前端分享HTML5发展史,HTML5草案的前身名为WebApplications1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。   HTML5的第一份正式草案已于2008年1...

好程序员IT
05/05
7
0
分享7个漂亮的HTML5视频音频播放器及源码

网页视频音频播放器大家并不陌生,在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播放器,当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天,让我们...

tp_wire
2012/07/11
33.9K
5

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
702
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
39
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
25
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
74
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
73
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部