Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放

一，VideoJS介绍

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

    <link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>
<script src=”http://vjs.zencdn.net/c/video.js”></script>
  2. 如果需要支持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>
  3. 页面中加入一个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"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Online Player</title>
<%@ include file="pages/common/include.jsp"%>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="${basePath }css/mobile.css"/>
<link rel="stylesheet" type="text/css" href="${basePath }css/index.css"/>
<link rel="stylesheet" type="text/css" href="${basePath }images/icons/iconfont.css"/>
<script type="text/javascript" src="${basePath }scripts/rem.js"></script>
<!--VideoJS的引用文件-->
<link href="${basePath }jslib/videoJS/video-js.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${basePath }jslib/videoJS/video.js"></script>
<script>
videojs.options.flash.swf = "${basePath }jslib/videoJS/video-js.swf";
</script>
<script type="text/javascript">
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<endTime){
$(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);
}
});
}
</script>

<script type="text/html" id="reviseRecordTpl">
{{#
var len = d.length;
for(var i=0; i<len; i++){
}}
<li>
<div class="theLiLfet">{{d[i].beginTimeStr.substring(0, 8)}}</div>
<div class="theLiRight">
<div class="translateAll">
<p class="translateForm">{{d[i].oneSrtBody}}</p>
{{# if(!$.string.isNullOrEmpty(d[i].otherSrtBody)){ }}
<p class="translateTo">{{d[i].otherSrtBody}}</p>
{{# } }}
</div>
{{#
var subtitleReviseList = d[i].subtitleReviseList;
var len1 = subtitleReviseList.length;
for(var j=0; j<len1; j++){
var srcBody = subtitleReviseList[j].srtBody;
}}
<div class="translate">{{srcBody}}</div>
{{# } }}
</div>
<div style="clear:both;"></div>
</li>
{{# } }}
</script>
</head>
<body ondblclick="return false;">
<header>
<a href="javascript:history.go(-1)" class="iconfont icon-fanhui"></a>
<span>电影字幕翻译较对</span>
</header>
<section>
<div id="myElement">
<video id="video" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="100%" height="250px"
poster="${basePath}videos/${video.videoFirstThumbPath}" data-setup=‘{"example_option":true}‘>
<source src="http://7xl9b8.dl1.z0.glb.clouddn.com/b2d53773-614f-4e75-af76-3fd19eb26d10" type=‘video/mp4‘ />
</div>
<div id="myCaptions">
<div id="playerShow" class="srt">
<c:forEach items="${subtitleList}" var="subtitle">
<p class="p" id="${subtitle.id }"
onclick = "revise(this);"
beginTime="${subtitle.beginTime }"
endTime="${subtitle.endTime }"
beginTimeStr="${subtitle.beginTimeStr }"
oneSrtBody="${subtitle.oneSrtBody }"
otherSrtBody="${subtitle.otherSrtBody }">${subtitle.oneSrtBody }<br/>${subtitle.otherSrtBody }</p>
</c:forEach>
</div>
</div>
</section>
<footer>
<a class="proofBtn" onclick="proofRecord(‘${video.id }‘);">校对记录</a>
</footer>

<div class="takeNotes">
<div class="close iconfont icon-shanchu"></div>
<ul>
<div id="reviseRecord"></div>
</ul>
</div>

<div class="shak">
<div class="close1 iconfont icon-shanchu"></div>
<div class="revise">
<div class="reviseTop">
<p id="oneSrtBody"></p>
<p id="otherSrtBody"></p>
</div>
<div class="reviseMain ">
<div class="reviseMainLeft">
<form id="saveRevise">
<input type="hidden" name="userId" value="${opUser.id }"/>
<input type="hidden" name="subtitleId" id="subtitleId"/>
<input type="hidden" name="videoId" value="${video.id }"/>
<input type="hidden" id="beginTimeForSeek"/>
<textarea name="srtBody" id="reviseContent"></textarea>
</form>
</div>
<div class="reviseMainRight iconfont icon-qiepian13" onclick="saveRevise()"></div>
<div style="clear: both;"></div>
</div>
</div>
</div>

<script>
$(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‘);
}
})();
</script>
</body>
</html>

时间： 2024-07-30 23:53:53

Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放的相关文章

使用HTML5的Audio标签打造WEB音频播放器

目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览器升级诸如Adobe Flash.Apple QuickTime等播放插件,只需使用现代浏览器就可以聆听任何可以发出声音的WEB网站. WEB中的Audio标签 HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

打造自己的html5视频播放器

前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签的控制栏部分,实现包括播放.暂停.进度和音量控制.全屏等功能,并自定义控制栏的样式.这是我自己的视频播放器的演示地址(请用chrome打开): http://animademo.sinaapp.com/html5_video/ (^-^:鼠标中键点击链接,在新标签页中打开) 这是该播放器的代码地址,

【转】一款开源免费跨浏览器的视频播放器--videojs使用介绍

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免费的,你可以在github很容易的获取它的最新代码. 2.使用它非常的容易,只要花

免费视频播放器videojs中文教程

Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 , 阅读的人数还蛮多的,有些热心的读者甚至还给过我小额打赏,钱虽不多,但是很感动.最几天又收到几位网友的私信,问一些关于videojs使用方面的问题.我自己都不记得videojs长什么模样了,出于别人对我的信任,又回头看了一遍上一篇文章,还是2014年的时候写的,如今videojs的版本已经更新到

一款开源免费跨浏览器的视频播放器--videojs使用介绍

最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免费的,你可以在github很容易的获取它的最新代码. 2.使用它非常的容易,只要花几秒钟就可以架起一个视频播放页面. 3.它几乎兼容所有的浏览器,并且优先使用html5,在不支持的浏览器中,会自动使用flash进行播放. 4. 界面可以定制,纯javascript和css打造.说明文档也非常的详细.

HTML5视频播放器accessible html5 video player

accessible html5 video player 是一款开源的轻量级播放器,采用HTML5视频播放技术,支持字幕显示.视频自由跳播.重播等功能.该html5视频插件由paypal Accessibility 团队开发,兼容所有Firefox.chrome.以及ie10以上版本等浏览器.ie9仅支持内部视频调用. 简洁清新的视频播放界面可以让你在很短的时间内喜欢上它,至少我是真的被它的界面吸引到了,有一点遗憾的是无法全屏,如果有知道的朋友可以向大家分享! accessible html5

FFMPEG+SDL2.0流媒体开发3---简易MP4视频播放器,提取MP4的H264视频序列解码并且显示

简介 之前写了一遍提取MP4中的音视频并且解码,这一篇引入SDL2.0来显示解码后的视频序列 实现一个简易的 视频播放器. 我这里用的FFMPEG和SDL2.0都是最新版的 可能网上的资料不是很多,API接口也变了很多,不过大体的思路还是一样的. 分析几个FFMPEG函数 在这之前我们分析几个代码中可能引起疑问的FFMPEG几个函数的源代码,我已经尽我的能力添加了注释,因为实在没有文档可能有的地方也不是很详尽  不过大体还是能看懂的 av_image_alloc (分配图片缓冲区) 我们在FFM

基于JSON数据HTML5视频播放器js插件教程

一.安装 可以通过Bower来安装该视频播放器插件. bower install frame-player 在页面中引入frameplayer.css和frameplayer.js文件. <link rel="stylesheet" href="path-to/frameplayer.css"> <script src="path-to/frameplayer.js"></script> 二.Html结构 在页