html5本地播放器使用html5中的video标签，因为video标签只支持ogg、webm和mp4格式的视频文件，所以这个播放器只能播放这3种格式的视频。苹果浏览器Safari只支持mp4格式的文件，并且不支持javascript获取本地文件的绝对路径，所以这个例子在Safari浏览器不能达到预期的效果，这个设想也没有达到原本的目的。
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<table width="200" border="1">
<tr>
<td height="2px"><input type="file" id="file" οnchange="onInputFileChange()" multiple="multiple" value="请选择文件"></td>
<td rowspan="2">
<video id="audio_id" controls autoplay loop width="420" height="340"></video>
</td>
</tr>
<tr>
<td align="left" valign="top"><select id="fileList" style="width:100%"></select></td>
</tr>
</table>
<script>
function onInputFileChange() {
var files = document.getElementById('file').files;
var objSelect = document.getElementById('fileList');
objSelect.size=files.length+1;// 设置select的size
for(var i=0;i<files.length;i++){
// alert(files[i].name);
var name = files[i].name;// 获取文件名称
var url = URL.createObjectURL(files[i]); // 获取文件绝对路径
var $fileList = $("<option value='"+url+"' οnclick=play('"+url+"')>"+name+"</option>");// 创建option并绑定时间
$("#fileList").append($fileList);// 将option添加到select
}
}
function play(url){
//alert("点击："+url);
document.getElementById("audio_id").src = url;
}
</script>
</body>
</html>
扫一扫
2092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
