首先给出下载地址:http://www.jq22.com/jquery-info404
配置推荐地址:http://www.cnblogs.com/afrog/p/6689179.html
配置好页面后请注意,如果要播放本地文件的话,是不能直接写本地路径的。这会涉及的一个跨域的问题,浏览器是不能直接访问本地文件的,不然就是安全问题。所以需要从后台请求视频流,与请求服务器类似。
接着就会遇到视频切换的问题,直接更改video的src会保存,因为页面中已经加载了这个视频插件。所以需要先销毁已有的,再重建一个播放器即可。关键代码:
var videoPlayer=$("#my-video").get(0);
if(typeof(videoPlayer)!="undefined"){
var myPlayer = videojs('my-video');
myPlayer.dispose();
}
var id="my-video";
$("#section-panel").html("<video id='"+id+"' class='video-js' controls preload='none' width='1280px' height='720px' poster='<%=request.getContextPath()%>/webFramework/common/image/wait.jpg' ><source id='video-source' src='' type='video/webm'></video>");
//设置资源路径
$("#video-source").attr("src","<%=request.getContextPath()%>/accDownload?accId=4");
videojs(id, {}, function(){//自动播放
// Player (this) is initialized and ready.
var myPlayer = videojs(id);
videojs(id).ready(function(){
var myPlayer = this;
myPlayer.play();
});
});
另外,由于原来未有播放器,所以需要判断是否先销毁:typeof(videoPlayer)!="undefined"