js前端接受blob对象数组怎么去操作

JavaScript018

js前端接受blob对象数组怎么去操作,第1张

可以合成一个大的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>