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更加方便




battle status 1.2.4

firefox:http://userscripts.org/scripts/show/155320

chrome:https://chrome.google.com/webstore/detail/pmopilednbipjalmgijijlmilcgabnbd/publish-accepted


1.2.4

add battle log total damge


1.2.3

fixed total damge bug.

出现伤害差之后计算出正确的总伤害和差值。


1.2.2

add battle log total damge

1.2.1

camapaigns页面添加total point.

add total point in camapaigns page.

1.2.0

camapaigns页面支持显示战场详情和BHer

in camapaigns page,show division domination and BHer's damage

1.1

显示战场双方最高输出者列表和division点数

show damage list and division domination.

-------------------------------------------------------------------------------------

  battle page:


  Military campaigns page: