html5 video audeo

一，VideoJS介绍

引用脚本，videojs很为你着想，直接cdn了，你都不需要下载这些代码放入自己的网站

<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>

<script src=”http://vjs.zencdn.net/c/video.js”></script>

如果需要支持IE8，这个js可以自动生成flash

<!-- If you'd like to support IE8 -->

<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

页面中加入一个Html5的video标签

<video id="my_video_1" class="video-js vjs-default-skin"

    controls preload="auto" width="640" height="264" poster="my_video_poster.png" data-setup="{}">

    <source src="my_video.mp4" type="video/mp4">

    <source src="my_video.webm" type="video/webm">

</video>

其中post就是视频的缩略图，那俩source一个指向mp4视频，一个指向webm视频，在页面加载过程中，video.js会判断浏览器支持哪个格式视频，会自动加载可播放的视频。

简单吧！

进阶：使用api

获取对象：

后面那个就是就是video标签的id值，这是myPlayer就是播放器对象了。

videojs("my-video").ready(function(){

    window.myPlayer = this;

    // EXAMPLE: Start playing the video.

    myPlayer.play();

});

方法：

获取对象

var videoObj = videojs(“videoId”);

ready:

myPlayer.ready(function(){

    //在回调函数中，this代表当前播放器，

    //可以调用方法，也可以绑定事件。

})

播放：

myPlayer.play();

暂停：

myPlayer.pause();

获取播放进度：

var whereYouAt = myPlayer.currentTime();

设置播放进度：

myPlayer.currentTime(120);

视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效

var howLongIsThis = myPlayer.duration();

缓冲，就是返回下载了多少

var whatHasBeenBuffered = myPlayer.buffered();

百分比的缓冲

var howMuchIsDownloaded = myPlayer.bufferedPercent();

声音大小（0-1之间）

var howLoudIsIt = myPlayer.volume();

设置声音大小

myPlayer.volume(0.5);

取得视频的宽度

var howWideIsIt = myPlayer.width();

设置宽度：

myPlayer.width(640);

获取高度

var howTallIsIt = myPlayer.height();

设置高度：

myPlayer.height(480);

一步到位的设置大小：

myPlayer.size(640,480);

全屏

myPlayer.enterFullScreen();

离开全屏

myPlayer.enterFullScreen();

添加事件

durationchange

ended //播放结束

firstplay

fullscreenchange

loadedalldata

loadeddata

loadedmetadata

loadstart

pause //暂停

play  //播放

progress

seeked

seeking

timeupdate

volumechange

waiting

resize inherited

var myFunc = function(){

// Do something when the event is fired

};

事件绑定

myPlayer.on("ended", function(){

    console.log("end", this.currentTime());

});

myPlayer.on("pause", function(){

    console.log("pause")

});

删除事件

myPlayer.removeEvent(“eventName”, myFunc);

虽然文章说明在不支持html5的情况下，会以flash播放，但在支持html5的firefox下播放mp4时，却遇到很大的困难，虽然调用了flash，但一直无法播放（不过我也一直怀疑我的firefox下的flash有问题，不知道是不是真的）。不过如果你听从videojs的建议，放两个格式的视频，就不会有这个问题了。

另外video的写法中还有专门针对flash的写法，当然你也可以用这个插件实现纯粹的flash播放（只写flash那部分就好，可以保证统一的浏览效果，不过iOS的浏览器不兼容flash，这就要你自己进行判断来处理


二、Audio标签介绍

javascript动态创建audio标签

在页面中添加audio元素的方法主要是两种，一种是在html中加入audio代码，可以加入一些属性（autoplay,preload）等，这些在之前的文章已经说过了。另外一种是js动态加载进来的。代码如下：

var audio=document.creatElement(“audio”);

audio.src=”audio/source.ogg”;//路径

audio.play();

或者更简单一些

audio=new Audio(“audio/source.ogg”);//路径

audio.play();

另外audio的属性，preload有三种不同的载入方式，我们可以通过preload=”auto”来实现音频的自动加载，但是我们无法通过直观的方式了解音频加载的进度，以及是否准备播放。这里提供了一个“canplaythrough”事件来监听音频是否已经加载完成。代码示例如下：

<!DOCTYPE html >

<html lang="en">

<head>

<title>Preload Ready</title>

<script type="text/javascript">

        var audio = document.createElement("audio");

        audio.src = "http://www.niumowang.org/wp-content/uploads/2012/03/beyond.ogg";

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

            alert('音频文件已经准备好，随时待命');

        }, false);

    </script>

</head>

<body>

</body>

</html>

运行代码复制代码另存代码(提示：可以编辑后运行)

第一次运行时间会长一些，第二次运行由于文件已经缓存到本地，所以会直接弹出提示框。

javascript控制audio的播放，暂停，停止

js如何控制audio标签的播放比较简单，在上面好多案例中已经提到了。主要是audio.play();同样暂停也比较简单audio.pause();就能很轻易搞定，看到这里你估计以为想要停止的话，也会使用这种语义化的函数了，呵呵，其实不是这样的audio.stop()并不能停止audio的播放。

如果你需要停止或者重新播放audio，必须设置它的currentTime，可见如下语句：

audio.currentTime = 0;

下面我给出一个完成的示例，包括了开始播放，暂停播放，停止播放

<!DOCTYPE html >

<html lang="en">

<head>

<title>Preload Ready</title>

<script type="text/javascript">

var audio = document.createElement("audio");

audio.src = "http://www.niumowang.org/wp-content/uploads/2012/03/beyond.ogg";

audio.addEventListener("canplaythrough",

function() {

alert('音频文件已经准备好，随时待命');

},

false);

function aPlay() {

audio.play();

}

function aPause() {

audio.pause();

}

function aStop() {

audio.currentTime = 0;

audio.pause();

}

function aSkip() {

audio.currentTime = 50;

audio.play();

 }

    </script>

</head>

<body>

<input type="button" onclick="aPlay();" value="播放音频">

<input type="button" onclick="aPause();" value="暂停音频">

<input type="button" onclick="aStop();" value="停止音频">

<input type="button" onclick="aSkip();" value="跳到第50秒">

</body>

</html>

运行代码复制代码另存代码(提示：可以编辑后运行)

注意：以上代码中的停止加上了pause()，另外跳到50秒加上了play()。这里主要是因为一旦play开始运行无法停止的，所以需要设置currentTime后使得音频暂停。另外跳转到50秒后，加上play()的做法是如果音频在没有播放的情况下，跳转到50秒时音频不会自动播放；而如果音频在播放中，那么跳到50秒的时候还是播放的，这里的play()可以忽略。当然具体情况可以自行定义。

 javascript控制audio的声音大小：

控制声音的大小比较简单，大概同play，pause那一套一样，主要是多了一个参数。

示例：audio.volume = 0;//表示静音  audio.volume = 1; 表示声音最大 ，声音值可以取0-1之间

演示不写了，可以自己修改上面代码运行框中的内容。

javascript控制audio的快进，快退，以及显示进度与时长

控制快进，快退的原理比较简单，只不过是设置audio的currentTime，案例如下

比如：audio.currentTime += 10;//10秒快进

<!DOCTYPE html >

<html lang="en">

<head>

<title>Preload Ready</title>

<script type="text/javascript">

var audio = document.createElement("audio");

audio.src = "http://www.niumowang.org/wp-content/uploads/2012/03/beyond.ogg";

audio.addEventListener("canplaythrough",

function() {

alert('音频文件已经准备好，随时待命');

},

false);

function aPlay() {

audio.play();

}

function go() {

audio.currentTime += 10;

audio.play();

}

function back() {

audio.currentTime -= 10;

audio.play();;

}

    </script>

</head>

<body>

<input type="button" onclick="aPlay();" value="播放音频">

<input type="button" onclick="go();" value="快进10秒">

<input type="button" onclick="back();" value="快退10秒">

</body>

</html>

运行代码复制代码另存代码(提示：可以编辑后运行)

关于显示进度的方法也不是很复杂，不过如果你想实现js配合css做一个进度条的模拟也许复杂一点。如果你对js以及css比较熟悉的话，解决的思路有很多。甚至可以做出很多酷炫的效果。我在这里只是点一下如何调用出该音频文件的时长以及播放到进度的时间。

调用出音频的时长不难解决 “audio.duration;” 就是了

调用处该文件的播放进度，这里需要用到一个时间监听。currentTime代表当前播放的时间，而且当currentTime改变的时候会触发timeupdate事件。因此，我们监听timeupdate，并且输出currentTime即可完成进度的判断。不多说，看示例代码：

<!DOCTYPE html >

<html lang="en">

<head>

<title>Preload Ready</title>

<script type="text/javascript">

var audio = document.createElement("audio");

audio.src = "http://www.niumowang.org/wp-content/uploads/2012/03/beyond.ogg";

audio.addEventListener("canplaythrough",

function() {

alert('音频文件已经准备好，随时待命');

},

false);

audio.addEventListener("timeupdate", showtime, true);

function showtime() {

document.getElementById("ltime").innerHTML = audio.duration;

document.getElementById("ctime").innerHTML = audio.currentTime;

}

function aPlay() {

audio.play();

}

function go() {

audio.currentTime += 10;

audio.play();

}

function back() {

audio.currentTime -= 10;

audio.play();

}

</script>

</head>

<body>

总时长：

<div id="ltime">

</div>

<br/>

当前播放：

<div id="ctime">

</div>

<br/>

<input type="button" onclick="aPlay();" value="播放音频">

<input type="button" onclick="go();" value="快进10秒">

<input type="button" onclick="back();" value="快退10秒">

</body>

</html>

运行代码复制代码另存代码(提示：可以编辑后运行)

OK，基本的操作已经说完了。

最后留下参考资料给大家：

http://msdn.microsoft.com/zh-CN/ie/hh377903

https://wiki.mozilla.org/Audio_Data_API

http://msdn.microsoft.com/en-us/library/gg589489(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/gg589528(v=vs.85).aspx

三、VideoJS+Audio标签实现视频与音频同步播放

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

Online Player

<%@ include file="pages/common/include.jsp"%>


 

 

videojs.options.flash.swf = "${basePath }jslib/videoJS/video-js.swf";

var player; 

//加载视频

$(function() {

player = videojs('video');

var audio=new Audio(vt.basePath+"videos/${video.videoSubtitlePath}");//路径

// 开始或恢复播放

player.on('play', function() {

audio.play();

console.log('开始/恢复播放');

});

// 暂停播放

player.on('pause', function() {

audio.pause();

console.log('暂停播放');

});

//调整音量

player.on('volumechange', function() {

audio.volume = player.volume();

console.log('调整音量');

});

//视频跳转

player.on('seeked', function() {

audio.currentTime = player.currentTime();

console.log('改变时长');

});

// 检测播放时间

player.on('timeupdate', function () {

//播放结束

if (player.duration() != 0 && player.currentTime() == player.duration()) {

audio.currentTime = 0;

audio.pause();

console.log('播放结束');

}

var beginTime = 0;

var endTime = 0;

var currentTime = player.currentTime() * 1000;

$("#playerShow p").each(function(){

beginTime = $(this).attr("beginTime");

endTime = $(this).attr("endTime");

if(currentTime>beginTime && currentTime

$(this).siblings("p").removeClass("fontStyle");

$(this).addClass("fontStyle");

var oHeight = $('#myCaptions').height();

var tmp = $(this).next().offset().top-$(this).parent().offset().top - oHeight*0.5;

tmp = tmp > 0 ? tmp * -1 : 0;

//$(this).animate($(this).parent()[0]).animate({marginTop: tmp + 'px'}, 500);

$(this).parent().animate({marginTop: tmp + 'px'}, 300);

}

});

});

});

//点击字幕修改

function revise(obj){

//暂停播放

thePlayer.play(false);

//弹出点击字幕及输入框

$('.shak').slideDown(500);

$('.revise .reviseMain') .addClass("animationActive")

//点击字幕时获得每段字幕的开始时间的毫秒值

var beginTime = $(obj).attr("beginTime")/1000;

$("#beginTimeForSeek").val(beginTime);

$("#subtitleId").val($(obj).attr("id"));

$("#oneSrtBody").html($(obj).attr("oneSrtBody"));

var otherSrtBody = $(obj).attr("otherSrtBody")

if(otherSrtBody){

$("#otherSrtBody").html(otherSrtBody);

}

}

//点击输入后确认发送

function saveRevise(){

var reviseContent = $("#reviseContent").val();

if($.string.isNullOrEmpty(reviseContent)){

alertWarn("请输入修正内容！");

return;

}

var data = getFormData("saveRevise");

$.ajax({

type: "POST",

url: vt.basePath+"saveRevise",

data: data,

success:function (result) {

if (result = "1") {

alertInfo("修订已保存成功！", hideRevise);

} else {

alertWarn("修订保存失败！");

}

}

});

}

//隐藏输入框

function hideRevise(){

var beginTime = $("#beginTimeForSeek").val();

thePlayer.seek(beginTime);

$('.shak').hide();

$('.revise .reviseMain') .removeClass("animationActive");

$("#reviseContent").val("");

layer.closeAll("dialog");

}

/**

*显示修正记录

*/

function proofRecord(videoId){

var layerObject = layer.load('加载中');

$.ajax({

type: "POST",

url: vt.basePath+"getRevisedSubtitle",

data: {"videoId":videoId},

success:function (data) {

fillFormByTpl(data, "reviseRecordTpl", "reviseRecord");

layer.close(layerObject);

}

});

}

{{# 

var len = d.length;

for(var i=0; i

}}

  • {{d[i].beginTimeStr.substring(0, 8)}}

    {{d[i].oneSrtBody}}

    {{# if(!$.string.isNullOrEmpty(d[i].otherSrtBody)){ }}

    {{d[i].otherSrtBody}}

    {{# } }}

    {{# 

    var subtitleReviseList = d[i].subtitleReviseList;

    var len1 = subtitleReviseList.length;

    for(var j=0; j

    var srcBody = subtitleReviseList[j].srtBody;

    }}

    {{srcBody}}

    {{# } }}

    {{# } }}

    电影字幕翻译较对

    controls preload="auto" width="100%" height="250px"

    poster="${basePath}videos/${video.videoFirstThumbPath}" data-setup='{"example_option":true}'>

    onclick = "revise(this);"

    beginTime="${subtitle.beginTime }"

    endTime="${subtitle.endTime }"

    beginTimeStr="${subtitle.beginTimeStr }"

    oneSrtBody="${subtitle.oneSrtBody }"

    otherSrtBody="${subtitle.otherSrtBody }">${subtitle.oneSrtBody }
    ${subtitle.otherSrtBody }

    校对记录

      $(function(){

      //点击 校对记录

      $('.proofBtn').on('click',function(){

      thePlayer.play(false);

      $('.takeNotes').slideDown(500);

      })

      //点击关闭修改记录

      $('.takeNotes .close').on('click',function(){

      thePlayer.play(true);

      $('.takeNotes').slideUp(500);

      })

      //点击关闭修改记录1

      $('.shak .close1').on('click',function(){

      $('.shak').slideUp(500);

      var beginTime = $("#beginTimeForSeek").val();

      thePlayer.seek(beginTime);

      })

      })

      //暂停状态下执行

      function stopanything(){

      //播放状态执行

      function biginanything(){

      var MyMar=setInterval(Marquee,speed);

      }

      }

      //暂停状态下执行

      function stopanything(){

      }

      (function bottonm(){

      if($(document).height()<$(window).height()){

      $('.bottom_fix').css({'position':'fixed','bottom':'0px'});

      $(document).height($(window).height()+'px');

      }

      })();

      • ©著作权归作者所有,转载或内容合作请联系作者
      • 人面猴
        序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
        沈念sama阅读 159,015评论 4赞 362
      • 死咒
        序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
        沈念sama阅读 67,262评论 1赞 292
      • 救了他两次的神仙让他今天三更去死
        文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
        开封第一讲书人阅读 108,727评论 0赞 243
      • 道士缉凶录：失踪的卖姜人
        文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
        开封第一讲书人阅读 43,986评论 0赞 205
      • 港岛之恋（遗憾婚礼）
        正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
        茶点故事阅读 52,363评论 3赞 287
      • 恶毒庶女顶嫁案：这布局不是一般人想出来的
        文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
        开封第一讲书人阅读 40,610评论 1赞 219
      • 城市分裂传说
        那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
        沈念sama阅读 31,871评论 2赞 312
      • 双鸳鸯连环套：你想象不到人心有多黑
        文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
        开封第一讲书人阅读 30,582评论 0赞 198
      • 万荣杀人案实录
        序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
        沈念sama阅读 34,297评论 1赞 242
      • 护林员之死
        正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
        茶点故事阅读 30,551评论 2赞 246
      • 白月光启示录
        正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
        茶点故事阅读 32,053评论 1赞 260
      • 活死人
        序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
        沈念sama阅读 28,385评论 2赞 253
      • 日本核电站爆炸内幕
        正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
        茶点故事阅读 33,035评论 3赞 236
      • 男人毒药：我在死后第九天来索命
        文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
        开封第一讲书人阅读 26,079评论 0赞 8
      • 一桩弑父案，背后竟有这般阴谋
        文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
        开封第一讲书人阅读 26,841评论 0赞 195
      • 情欲美人皮
        我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
        沈念sama阅读 35,648评论 2赞 274
      • 代替公主和亲
        正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
        茶点故事阅读 35,550评论 2赞 270

      推荐阅读更多精彩内容