[读书笔记]Html5音频和视频

来源：互联网发布：淘宝发布宝贝图片要求编辑：程序博客网时间：2024/05/12 15:20

audio和video的出现让HTML5的媒体应用多了新选择，开发人员不必使用插件就可以播放音频和视频。

1.1.1 视频容器

视频容器（视频文件）包含了音频轨道，视频轨道和其他一些元数据。

主流视频容器一下视频格式：

.avi Audio Video Interleave

.flv Flash Video

.mp4 MPEG 4

.mkv Matroska

.ogv Ogg

1.1.2 音频和视频编解码器

音频和视频的编码/解码是一组算法，用来对一段特定的音频或视频进行解码编码，以便音视频能够播放。

音频编解码器

AAC MPEG-3 Ogg Vorbis

视频编解码器

H.264 VP8 Ogg Theora

HTML5本打算指定编解码器，但是因为编码器专业及各个浏览器厂商支持的问题，HTML5规范放弃了对编码器的要求。

1.1.3 HTML5 Audio和Video的限制

1）目前HTML5视频规范中还咩有比特率切换的标准

2）HTML5的媒体收到HTTP跨源资源共享的限制

3）全屏视频无法通过脚本控制

1.2 HTML5 audio videoAPI

好处：

作为浏览器原生支持的功能，新的audio元素和video元素无需安装，因此放弃了插件，简化开发

媒体元素向Web元素提供了通用、集成和可校本化控制的API

1.3 简单的视频应用

1.3.1 判断浏览器是否支持HTML5 video

//浏览器支持性的检测

function checkSupport() {

//动态创建video元素，检测函数是否存在，!!符号为，强制把运算结果转换成布尔值。

var hasVideo = !!(document.createElement( 'video').canPlayType);

if (hasVideo)

alert( "支持video");

else

alert( "不支持video");

}

1.3.2 video的简单使用

你的浏览器不支持HTML5的视频

</video >

</object >

</video >

</video >

1.3.3 audio的简单使用

</audio>

</audio>

</audio>

1.4.1 媒体控制相关知识

常用的控制函数

load() 加载音视频文件，一般动态生成元素时使用

play() 加载并播放音视频文件，默认从头播放

pause() 暂停处于播放状态的音视频文件

canPlayType(type) 测试video元素是否支持特定的MIME类型的文件

只读的媒体特性

duration 整个媒体文件的播放时长

paused 媒体文件暂停，返回true，还未播放返回false

ended 如果媒体文件播放结束，返回true

startTime 返回最早的播放起始时间，一般是0.0

error 在发生了错误的情况下，返回的错误代码

currentSrc 以字符串形式，返回当前正在播放或已加载的文件

<!-- 可用脚本控制的特性值

autoplay 设置自动播放，或查询自动播放状态

loop 设置循环状态，或查询可以被循环播放的状态

currentTime 以s为单位的时间，定位媒体文件位置，或查询从开始播放到现在所用时间

controls 显示或隐藏用户控制界面，或查询用户控制界面当前是否可见

volume 在0.0到1.0之间设置音频的相对值，或查询当前音量相对值

muted 为音频文件设置静音或消除静音，或查询当前是否为静音

autobuffer 通知播放器在媒体文件爱你开始播放器前，是否进行缓存加载，autoplay会屏蔽此特性

Video元素的额外特性

poster 在视频加载完成之前,代表视频内容的图片的URL地址，改特性可读可修改

width height 设置和读取显示尺寸

videowidth videoHeight 返回视频固有或自适应的宽高度。只读。

video可以被HTML5 Canvas的函数所调用。

1.4.2 audio控制学习

点击按钮，播放或暂停音乐的播放。

</audio>

function toggleSound() {

var music = document.getElementById( "clickSound");

var toggle_btn = document.getElementById( "toggle_btn");

if (music.paused) {

music.play();

toggle_btn.innerHTML = "暂停";

} else {

music.pause();

toggle_btn.innerHTML = "播放";

}

</script>

1.4.3 video控制学习

定时捕获视频帧，点击帧，可跳转到视频位置。

<video id= "movies" controls oncanplay ="startVideo()" onended= "stopTimeline()"

width= "576px" height ="432px">

</video>

var updateInterval = 1000 * 5; //时间线帧更新间隔的毫秒数

var frameWidth = 110; //时间线帧的大小

var frameHeight = 100;

var frameRows = 4; //时间线帧的数量

var frameColumns = 4;

var frameGrid = frameRows * frameColumns;

//当前帧

var frameCount = 0;

//在播放结束时取消计时器

var intervalId;

var videoStarted = false;

function startVideo() {

if (videoStarted) //只在收IU线打开视频时，设置定时器

return;

//计算初始帧，然后按固定的时间价格创建其他帧

updateFrame();

intervalId = setInterval(updateFrame, updateInterval);

videoStarted = true;

var timeline = document.getElementById( "timeline");

timeline.onclick = function(evt) {

var offX = evt.layerX - timeline.offsetLeft;

var offY = evt.layerY - timeline.offsetTop;

//从索引0开始计算单机的是网格中的哪一帧

var clickedFrame = Math.floor(offY / frameHeight) * frameRows;

clickedFrame += Math.floor(offX / frameWidth);

//打开启频后，找到实际的帧

var seekedFrame = (Math.floor(frameCount / frameGrid)) * frameGrid + clickedFrame;

//如果用户单机当前帧，那么假设它是最后IU一轮帧

if (clickedFrame > (frameCount % 16))

seekedFrame -= frameGrid;

//不能再视频播放前搜索

if (seekedFrame < 0)

return;

//搜索视频到那一帧

var video = document.getElementById( "movies");

video.currentTime = ((seekedFrame * updateInterval) / 1000);

//然后讲帧数设置给目标

frameCount = seekedFrame;

}

function updateFrame() {

var video = document.getElementById( "movies");

var timeline = document.getElementById( "timeline");

var ctx = timeline.getContext( "2d");

//根据帧数计算当前位置，然后使用视频在那绘制图片作为源

var framePosition = frameCount % frameGrid;

var frameX = (framePosition % frameColumns) * frameWidth;

var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;

ctx.drawImage(video, 0, 0, 576, 432, frameX, frameY, frameWidth, frameHeight);

frameCount++;

}

//体质手机时间线帧

function stopTimeline() {

clearInterval(intervalId);

}

</script>

0 0