后台没有写出来，只写了个ajax加载的demo~
可以方便的通过点击不同的li标签实现视频的切换。
等我学完java和serlet后再来填坑吧~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>videoDemo</title>
</head>
<body>
<ul id="list">
<li οnclick="show(this)">视频1</li>
<li οnclick="show(this)">视频2</li>
<li οnclick="show(this)">视频3</li>
</ul>
<video width="800" height="" id="video_play1">
</video>
</body>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
var srcItem = ''; //初始化一个字符串存放后台返回的
var url = "http://localhost:8088/service";//此处url为后台文件地址
function show(obj){ //show方法
var $object = $(obj);
var index = $object.index(); //取得当前点击的li的索引.
$.ajax({ //这里采用jquery的ajax,用来使用http协议里的get来取得后台返回的视频文件地址.
type: 'get', //get方法
url: url, //服务器地址
data: index, //传入数据,此处是get方法 可以传入index值给后台,以让后台返回文件地址的凭依
cache: false, //cache为缓存
dataType: 'json', //返回数据格式
success: function(result) {
srcItem = result.src; //将返回的src赋给srcItem
document.getElementById("video_play1").src = srcItem ; //给视频一个新地址
document.getElementById("video_play1").play(); //让视频可以播放
}
},
error: function() {
console.log("ERROR");
}
});
}
}
</script>
</html>
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
