您的位置：首页 > 移动开发 > Android开发

html5及android多个视频连续播放问题

2014-10-23 15:30 429 查看 
<!DOCTYPE html>
<html>

<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>h5test</title>

<style type="text/css">
body, html {
height: 100%;
width: 100%;
}
*{
margin:0px;
padding:0px;
}

#mapArea {
position:absolute;
width:20%;
height:20%;
right:15px;
top:15px;
z-index:2;
}
#video1 {
position:absolute;
width:100%;
height:95%;
}
#controlArea {
position:absolute;
background-color:#eee;
width:100%;
height:5%;
bottom:0px;
text-align:center;
}
#play {
margin:auto;
width:100px;
height:40px;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script charset="utf-8" src="js/jquery-1.8.0.min.js"></script>
<script charset="utf-8" src="js/jquery-jsonp.js"></script>
<script charset="utf-8" src="js/html5Preloader.js"></script>
</head>

<body onload="init();">
<div id="mapArea"></div>
<div id="videoArea">
<video id="video1" preload="auto">
<source src="" type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
<div id="controlArea">
<button id="play" onclick="playPause()">播放/暂停</button>
</div>

<script type="text/javascript">
// var playList = new Array("http://125.39.210.20/mobile/mobile2_hd1.mp4", "http://125.39.210.20/mobile/mobile2_hd2.mp4", "upload/mov_bbb.mp4", "upload/2.mp4");
var playList = new Array();
var currentIndex = 0;
var myVideo1=document.getElementById("video1");

myVideo1.addEventListener("ended",
function() {
if(currentIndex >= playList.length)
return;
// alert("ReadyState:" + myVideo2.readyState + "Start: " + myVideo2.buffered.start(0) + " End: "  + myVideo2.buffered.end(0));
getVideo(myVideo1, currentIndex++);
myVideo1.play();
}, false);

function init() {
var min = 10;
var max = 17;
var map = new qq.maps.Map(document.getElementById("mapArea"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(39.91474,116.37333),
zoom:10,
minZoom: min,
maxZoom: max
});
getPlayList();
}

function playPause()
{

if (myVideo1.paused)
myVideo1.play();
else
myVideo1.pause();
}

function getVideo(video, i) {
if (i < playList.length && playList[i] != "") {
video.src = playList[i];
} else {
alert("Enter a valid video URL");  // fail silently
}
}

function getPlayList(){
var gurl = 'http://125.39.210.20/videoindex' + "?callback=?";

$.jsonp({
url: gurl,
data: {track_id:7},
success: function (data, textStatus, xOptions) {
var myLoader = html5Preloader();      //预加载视频
// myLoader.addFiles("http://123.151.37.91/vcloud.tc.qq.com/1019_229bd248a5594e9e98fdd3e047328fcb.f0.mp4"
//   + "?vkey=5907698E6251D230B8E61D9458C06E2AA26CF3D44F7E8866A8B46DDC9639D689D8E605C494CC9891"
//   + "&sha=3c87b52f0177e20de9f834b14099b7faa860e69b");
for (var video in data.videos) {
playList[data.videos[video].order - 1] = data.videos[video].url;
myLoader.addFiles(data.videos[video].url);

};
getVideo(myVideo1, currentIndex++);
},
error: function (xOptions, textStatus) {
alert(xOptions + "error2 status: "+ textStatus);
}
});
}
</script></body>
</html>


街景地图有好多短小的视频，要求把这些短视频串起来播放，首先做成网页版的html5格式，可以支持在网页中通过微信分享。

1、html5有专门播放视频的video控件，可以直接播放视频，在第一个视频播放完毕后改变src加载第二个视频。

这样有一个问题就是视频切换的时候存在闪烁黑屏。

优酷上的长视频（比如2小时）其实是有好多小视频（6分钟）拼接起来的，在网页上用的是flash，可以实现基本感受不到的切换耗时（这个实现调了一个很长的js脚

本）。在手机上用的是html5的video标签，在每个视频切换时会转缓冲圈，时间很短，说明做过预加载。腾讯视频上的长视频（比如两小时）其实就是一个长视频，所以好处

理。

也问过腾讯视频那边的负责人，他们说视频拼接播放实现很困难。我也尝试过做下一个视频的预加载，网上找了一个html5perloader.js的开源代码，不过很奇怪的原

因，用chrome的F12的network调试的时候发现有的视频第二次加载是从cache，而我试线上的视频就不是了，可能我没用对html5perloader吧，不过这个开源代码没有文档，

自己看了它的代码，只怪自己没做过js，所以没怎么看懂。

上面是我写的html5的代码，很简单，中间访问线上视频的时候出现了access-origin跨域的问题，可以参考这个链接http://blog.csdn.net/net_lover/article/details/5172509/

2、Android端主要用videoview控件实现多个视频的连续播放，也是在第一个视频播放完成后出发completed事件播放下一个视频，自己在网上找了一个通过socket建立代

理服务器的预加载方法，链接为：http://blog.csdn.net/hellogv/article/details/7911293，这是一个系列。

另外我发现当completed事件发生时加载本地的视频在不同的手机上也

会出现不同的效果，有的停顿时间很短有的停顿时间很长。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航