<!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 οnlοad="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" οnclick="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事件發生時加載本地的視頻在不同的手機上也
會出現不同的效果，有的停頓時間很短有的停頓時間很長。