bigcat

HTML5音视频播放demo

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>MP3播放DEMO</title>

<style type="text/css">

body{font-size:12px;}

.list a{padding:5px;}

</style>

</head>

<body>

<input type="file" multiple onchange="changeed(this)" />按住Ctrl多选

<div class="list" id="list"></div>

<div id="v"><video controls="" autoplay="" width="300" height="40" name="media"><source src="" type="audio/mp3"></video></div>

<div id="info"></div>

<div id="method"></div>

<script>

var Point=0,List=[];

var audio = document.getElementsByTagName('video')[0];

audio.volume=0.5;

audio.addEventListener("ended",function(){

autoPlay();

});

function changeed(el){

var Files = el.files;

if(Files.length==0){return;}

var str = '';

for(var i=0; i<Files.length; i++){

var obj = {name:Files[i].name,url:URL.createObjectURL(Files[i])};

List.push(obj);

}

/*var reader = new FileReader();

reader.onload = function(ev){

var data = ev.target.result;

console.log(data);

}

reader.readAsDataURL(Files[0]);*/

renderList();

PlayNew();

}

function del(num){

List.splice(num,1);

renderList();

}

function renderList(){

var str = '';

for(var i=0; i<List.length; i++){

str += (i+1)+':<a href="#" onclick="Play('+i+')">'+List[i].name+'</a><a href="#" onclick="del('+i+')">删除</a><br/>'

}

document.getElementById("list").innerHTML = str;

}

function PlayNew(){

var num = List.length-1;

Play(num);

}

function Play(num){

Point = num;

audio.src = List[num].url;

document.getElementById('info').innerHTML = "当前播放:"+List[num].name;

}

var module = 1;

function autoPlay(){

if(module==1){

Point++;

if(Point>=List.length){Point=0;}

Play(Point);

}else{

Play(Point);

}

}

function loop(num){

module = num;

if(num==0){

document.getElementById('method').innerHTML = '当前模式:单曲循环 <button onclick="loop(1)">列表循环</button>';

}else{

document.getElementById('method').innerHTML = '当前模式:列表循环 <button onclick="loop(0)">单曲循环</button>';

}

}

loop(1);

</script>

</body>

</html>


HTML5 Audio/Video

HTML5 Audio/Video 方法


方法描述

addTextTrack():向音频/视频添加新的文本轨道

canPlayType():检测浏览器是否能播放指定的音频/视频类型

load():重新加载音频/视频元素

play():开始播放音频/视频

pause():暂停当前播放的音频/视频


HTML5 Audio/Video 属性


属性描述

audioTracks:返回表示可用音轨的 AudioTrackList 对象

autoplay:设置或返回是否在加载完成后随即播放音频/视频

buffered:返回表示音频/视频已缓冲部分的 TimeRanges 对象

controller:返回表示音频/视频当前媒体控制器的 MediaController 对象

controls:设置或返回音频/视频是否显示控件(比如播放/暂停等)

crossOrigin:设置或返回音频/视频的 CORS 设置

currentSrc:返回当前音频/视频的 URL

currentTime:设置或返回音频/视频中的当前播放位置(以秒计)

defaultMuted:设置或返回音频/视频默认是否静音

defaultPlaybackRate:设置或返回音频/视频的默认播放速度

duration:返回当前音频/视频的长度(以秒计)

ended:返回音频/视频的播放是否已结束

error:返回表示音频/视频错误状态的 MediaError 对象

loop:设置或返回音频/视频是否应在结束时重新播放

mediaGroup:设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)

muted:设置或返回音频/视频是否静音

networkState:返回音频/视频的当前网络状态

paused:设置或返回音频/视频是否暂停

playbackRate:设置或返回音频/视频播放的速度

played:返回表示音频/视频已播放部分的 TimeRanges 对象

preload:设置或返回音频/视频是否应该在页面加载后进行加载

readyState:返回音频/视频当前的就绪状态

seekable:返回表示音频/视频可寻址部分的 TimeRanges 对象

seeking:返回用户是否正在音频/视频中进行查找

src:设置或返回音频/视频元素的当前来源

startDate:返回表示当前时间偏移的 Date 对象

textTracks:返回表示可用文本轨道的 TextTrackList 对象

videoTracks:返回表示可用视频轨道的 VideoTrackList 对象

volume:设置或返回音频/视频的音量

HTML5 Audio/Video 事件


事件描述

abort:当音频/视频的加载已放弃时

canplay:当浏览器可以播放音频/视频时

canplaythrough:当浏览器可在不因缓冲而停顿的情况下进行播放时

durationchange:当音频/视频的时长已更改时

emptied:当目前的播放列表为空时

ended:当目前的播放列表已结束时

error:当在音频/视频加载期间发生错误时

loadeddata:当浏览器已加载音频/视频的当前帧时

loadedmetadata:当浏览器已加载音频/视频的元数据时

loadstart:当浏览器开始查找音频/视频时

pause:当音频/视频已暂停时

play:当音频/视频已开始或不再暂停时

playing:当音频/视频在已因缓冲而暂停或停止后已就绪时

progress:当浏览器正在下载音频/视频时

ratechange:当音频/视频的播放速度已更改时

seeked:当用户已移动/跳跃到音频/视频中的新位置时

seeking:当用户开始移动/跳跃到音频/视频中的新位置时

stalled:当浏览器尝试获取媒体数据,但数据不可用时

suspend:当浏览器刻意不获取媒体数据时

timeupdate:当目前的播放位置已更改时

volumechange:当音量已更改时

waiting:当视频由于需要缓冲下一帧而停止


$(window).width()为0BUG

已知场景:

APP内嵌浏览器偶发$(window).width()的值为0。

临时解决:

$(function(){

var w= $(window).width();

if(w==0){

setTimeout(arguments.callee,10);

return;

}

});



ajax cros setting

使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,需要在服务端设置响应允许Access-Control-Allow-Origin:

如:

PHP:header("Access-Control-Allow-Origin: *");

html添加标签:<meta http-equiv="Access-Control-Allow-Origin" content="*">

CORS可以多种方式提交数据,比只能以GET方式提交数据的JSONP更加方便