html5本地播放器

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" onchange="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+"' onclick=play('"+url+"')>"+name+"</option>");// 创建option并绑定时间

   $("#fileList").append($fileList);// 将option添加到select

}

}

function play(url){

//alert("点击:"+url);

document.getElementById("audio_id").src = url;

}

</script>

</body>

</html>


你可能感兴趣的:(html5本地播放器)