您的位置：首页 > Web前端 > HTML5

HTML5程序设计音频和视频

2013-04-13 20:35 274 查看

浏览器支持性检测

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

也可以在audio元素或video元素中放入备选内容，如果浏览器不支持该元素，这些备选内容就会显示在元素对应的位置。

<video src="video.webm" controls>
Your Browser does not support HTML5 video.
</video>

包含Audio元素的HTML界面

<audio controls src="Source/johann_sebastian_bach_air.ogg">
An audio clip form Johann Sebastian Bach
</audio>

代码中的controls特性告诉浏览器显示通用的用户控件，包括开始、停止、跳播以及音量控制。如果不指定controls特性，用户将无法播放页面上的音频。

声明多个source

在指明src的时候，我们可以声明多个src，用作备用。如果浏览器不支持播放第一种格式的文件，它会自动选择播放第二种格式。

<audio controls>
<source src="Source/johann_sebastian_bach_air.ogg" />
<source src="Source/johann_sebastian_bach_air.mp3" />
An audio clip form Johann Sebastian Bach
</audio>

注意来源列表的排放顺序，要按照用户体验由高到低或者服务器消耗由低到高列出。

使用自动播放特性

<audio autoplay controls>
<source src="Source/johann_sebastian_bach_air.ogg" />
<source src="Source/johann_sebastian_bach_air.mp3" />
An audio clip form Johann Sebastian Bach
</audio>

注意并不是每种设备都支持自动播放，IOS就不支持。

用脚本控制播放

<audio id="clickSound" controls>
<source src="Source/johann_sebastian_bach_air.ogg" />
<source src="Source/johann_sebastian_bach_air.mp3" />
An audio clip form Johann Sebastian Bach
</audio>
<button id="toggle" onclick="toggleSound()">Paly</button>
<script type="text/javascript">
function toggleSound() {
var music = document.getElementById("clickSound");
var goggle = document.getElementById("toggle");
if (music.paused) {
music.play();
toggle.innerHTML = "Pause";
}
else {
music.pause();
toggle.innerHTML = "Paly";
}
}
</script>

鼠标悬停播放视频

<video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"
width="400px" height="300px">
<source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

综合应用：创建视频时序查看器

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<title>Video Timeline</title>

<video id="movies" autoplay oncanplay="startVideo()" onended="stopTimeline()" autobuffer="true"
width="400px" height="300px">
<source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

<canvas id="timeline" width="400px" height="300px">

<script type="text/javascript">

// # of milliseconds between timeline frame updates
var updateInterval = 5000;

// size of the timeline frames
var frameWidth = 100;
var frameHeight = 75;

// number of timeline frames
var frameRows = 4;
var frameColumns = 4;
var frameGrid = frameRows * frameColumns;

// current frame
var frameCount = 0;

// to cancel the timer at end of play
var intervalId;

var videoStarted = false;

function startVideo() {

// only set up the timer the first time the
// video is started
if (videoStarted)
return;

videoStarted = true;

// calculate an initial frame, then create
// additional frames on a regular timer
updateFrame();
intervalId = setInterval(updateFrame, updateInterval);

// set up a handler to seek the video when a frame
// is clicked
var timeline = document.getElementById("timeline");
timeline.onclick = function(evt) {
var offX = evt.layerX - timeline.offsetLeft;
var offY = evt.layerY - timeline.offsetTop;

// calculate which frame in the grid was clicked
// from a zero-based index
var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
clickedFrame += Math.floor(offX / frameWidth);

// find the actual frame since the video started
var seekedFrame = (((Math.floor(frameCount / frameGrid)) *
frameGrid) + clickedFrame);

// if the user clicked ahead of the current frame
// then assume it was the last round of frames
if (clickedFrame > (frameCount % 16))
seekedFrame -= frameGrid;

// can't seek before the video
if (seekedFrame < 0)
return;

// seek the video to that frame (in seconds)
var video = document.getElementById("movies");
video.currentTime = seekedFrame * updateInterval / 1000;

// then set the frame count to our destination
frameCount = seekedFrame;
}
}

// paint a representation of the video frame into our canvas
function updateFrame() {
var video = document.getElementById("movies");
var timeline = document.getElementById("timeline");

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

// calculate out the current position based on frame
// count, then draw the image there using the video
// as a source
var framePosition = frameCount % frameGrid;
var frameX = (framePosition % frameColumns) * frameWidth;
var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);

frameCount++;
}

// stop gathering the timeline frames
function stopTimeline() {
clearInterval(intervalId);
}

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML5程序设计 音频和视频

HTML5程序设计音频和视频