可以合成一个大的Blob,再放到src上进行播放。
var theBigBlob = new Blob(blobsArr, {type: "video/mp4"
})
document.getElementById("re-video").src = URL.createObjectURL(blob)
另外,请问你知道怎么只取一段blob吗,这个blob数组只有从前面开始取才能播放,单个的好像不能播放,我想只取后面几个连续的一部分
1、直接当做js文件引入 ,相应变量就能获取到;2、如果想读取本地json文件,需要环境,并且需要后台程序支持,不然出现安全性问题;
3、可以使用bloburl方式去获取文件,不需要后台支持,需要配环境 不然也有安全性问题;
用ajax请求这个json文件,换句话说,就是如下伪代码:
//请求/todo.json这个路径时,返回json文件
$.get('/todo.json').done(function(data){
do something with the data
})
刚好有个介绍filesystem的就有你这个功能:
<p>从www.html5rocks.com/zh/tutorials/file/dndfiles
中间“分割文件”部分摘过来的,他是分别读取的1-5,6-15,7-8字节的数据,可以参考一下,很容易改成连续读取8个字节的,你懂的
</p>
<style>
#byte_content {
margin: 5px 0
max-height: 100px
overflow-y: auto
overflow-x: hidden
}
#byte_range { margin-top: 5px }
</style>
<input type="file" id="files" name="file" /> Read bytes:
<span class="readBytesButtons">
<button data-startbyte="0" data-endbyte="4">1-5</button>
<button data-startbyte="5" data-endbyte="14">6-15</button>
<button data-startbyte="6" data-endbyte="7">7-8</button>
<button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>
<script>
function readBlob(opt_startByte, opt_stopByte) {
var files = document.getElementById('files').files
if (!files.length) {
alert('Please select a file!')
return
}
var file = files[0]
var start = parseInt(opt_startByte) || 0
var stop = parseInt(opt_stopByte) || file.size - 1
var reader = new FileReader()
// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
document.getElementById('byte_content').textContent = evt.target.result
document.getElementById('byte_range').textContent =
['Read bytes: ', start + 1, ' - ', stop + 1,
' of ', file.size, ' byte file'].join('')
}
}
if (file.webkitSlice) {
var blob = file.webkitSlice(start, stop + 1)
} else if (file.mozSlice) {
var blob = file.mozSlice(start, stop + 1)
}
reader.readAsBinaryString(blob)
}
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte')
var endByte = evt.target.getAttribute('data-endbyte')
readBlob(startByte, endByte)
}
}, false)
</script>