itboos/blob_video_src.html

## blob_video_src.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <title>blob 视频地址-demo</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-tap-highlight" content="no">
    <!--<meta http-equiv="content-security-policy" content="block-all-mixed-content">-->
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="container">

        <h1><a href="../../index.html" title="simpl.info home page">simpl.info</a> offline video</h1>

        <video autoplay controls poster="./media/1.jpg" preload="metadata" width="600px" height="400">Your browser does not support the video element</video>

        <p>This demo gets a .webm file via XHR, stores it locally using the File APIs, retrieves the data and sets it as the <code>src</code> of the video element.</p>

        <p id="videoSrc"></p>
        <p id="data"></p>

        <a href="https://github.com/samdutton/simpl/blob/gh-pages/video/offline" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

    </div>

<script>
// 源码:
'use strict';

/* globals FileError */

// get video file via XHR
// store with File API
// read Blob from File API and set as video src using createObjectUrl()
// play video

var video = document.querySelector('video');

function getVideo(fileEntry) {
  // 这里使用本地的视频文件，使用时， 要开启本地服务器访问的形式，不能以文件的形式访问
  get('./media/mv02.mp4', function(uInt8Array) {
    var blob = new Blob([uInt8Array], {
       // type: 'video/webm' // 使用这个也可以
      type: 'video/mp4'
    });
    writeToFile(fileEntry, blob);
  });
}

function get(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';
  xhr.send();

  xhr.onload = function() {
    if (xhr.status !== 200) {
      alert('Unexpected status code ' + xhr.status + ' for ' + url);
      return false;
    }
    callback(new Uint8Array(xhr.response));
  };
}

// code adapted from HTML5 Rocks article by Eric Bidelman
// https://www.html5rocks.com/en/tutorials/file/filesystem/

// init a FileSystem
// create a file
// write to the file
// read from the file

window.requestFileSystem =
window.requestFileSystem || window.webkitRequestFileSystem;

window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, // 5MB
  handleInitSuccess, handleError);

function handleInitSuccess(fileSystem) {
  window.fileSystem = fileSystem;
  log('Initiated FileSystem: ' + fileSystem.name);
  createFile('video.webm');
}

function createFile(fullPath) {
  window.fileSystem.root.getFile(fullPath, {
    create: true
    /* exclusive: true */
  },
  function(fileEntry) {
    log('Created file: ' + fileEntry.fullPath);
    getVideo(fileEntry);
  }, handleError);
}

function writeToFile(fileEntry, blob) {
  // Create a FileWriter object for fileEntry
  fileEntry.createWriter(function(fileWriter) {
    fileWriter.onwriteend = function() {
      // read from file
      log('Wrote to file ' + fileEntry.fullPath);
      readFromFile(fileEntry.fullPath);
    };
    fileWriter.onerror = function(e) {
      log('Write failed: ' + e.toString());
    };
    // Create a new Blob and write it to file
    fileWriter.write(blob);
  }, handleError);
}

function readFromFile(fullPath) {
  window.fileSystem.root.getFile(fullPath, {}, function(fileEntry) {
    // Get a File object representing the file
    // then use FileReader to read its contents
    fileEntry.file(function(file) {
      var reader = new FileReader();
      reader.onloadend = function() {
        // video.src = this.result;
        video.src = URL.createObjectURL(new Blob([this.result]));
      };
      // reader.readAsDataURL(file);
      reader.readAsArrayBuffer(file);
    }, handleError);
  }, handleError);
}

function handleError(e) {
  switch (e.code) {
  case FileError.QUOTA_EXCEEDED_ERR:
    log('QUOTA_EXCEEDED_ERR');
    break;
  case FileError.NOT_FOUND_ERR:
    log('NOT_FOUND_ERR');
    break;
  case FileError.SECURITY_ERR:
    log('SECURITY_ERR');
    break;
  case FileError.INVALID_MODIFICATION_ERR:
    log('INVALID_MODIFICATION_ERR');
    break;
  case FileError.INVALID_STATE_ERR:
    log('INVALID_STATE_ERR');
    break;
  default:
    log('Unknown error');
    break;
  }
}

var data = document.getElementById('data');

function log(text) {
  data.innerHTML += text + '<br />';
}

document.querySelector('video').addEventListener('loadedmetadata', function() {
  var fileName = this.currentSrc.replace(/^.*[\\/]/, '');
  document.querySelector('#videoSrc').innerHTML = 'currentSrc: ' + fileName +
  '<br /> videoWidth: ' + this.videoWidth + 'px<br /> videoHeight: ' +
      this.videoHeight + 'px';
});
</script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
	<title>blob 视频地址-demo</title>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="msapplication-tap-highlight" content="no">
	<!--<meta http-equiv="content-security-policy" content="block-all-mixed-content">-->
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<div id="container">

	<h1><a href="../../index.html" title="simpl.info home page">simpl.info</a> offline video</h1>

	<video autoplay controls poster="./media/1.jpg" preload="metadata" width="600px" height="400">Your browser does not support the video element</video>

	<p>This demo gets a .webm file via XHR, stores it locally using the File APIs, retrieves the data and sets it as the <code>src</code> of the video element.</p>

	<p id="videoSrc"></p>
	<p id="data"></p>

	<a href="https://github.com/samdutton/simpl/blob/gh-pages/video/offline" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

	</div>

	<script>
	// 源码:
	'use strict';

	/* globals FileError */

	// get video file via XHR
	// store with File API
	// read Blob from File API and set as video src using createObjectUrl()
	// play video

	var video = document.querySelector('video');

	function getVideo(fileEntry) {
	// 这里使用本地的视频文件，使用时，要开启本地服务器访问的形式，不能以文件的形式访问
	get('./media/mv02.mp4', function(uInt8Array) {
	var blob = new Blob([uInt8Array], {
	// type: 'video/webm' // 使用这个也可以
	type: 'video/mp4'
	});
	writeToFile(fileEntry, blob);
	});
	}

	function get(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.responseType = 'arraybuffer';
	xhr.send();

	xhr.onload = function() {
	if (xhr.status !== 200) {
	alert('Unexpected status code ' + xhr.status + ' for ' + url);
	return false;
	}
	callback(new Uint8Array(xhr.response));
	};
	}

	// code adapted from HTML5 Rocks article by Eric Bidelman
	// https://www.html5rocks.com/en/tutorials/file/filesystem/

	// init a FileSystem
	// create a file
	// write to the file
	// read from the file

	window.requestFileSystem =
	window.requestFileSystem \|\| window.webkitRequestFileSystem;

	window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, // 5MB
	handleInitSuccess, handleError);

	function handleInitSuccess(fileSystem) {
	window.fileSystem = fileSystem;
	log('Initiated FileSystem: ' + fileSystem.name);
	createFile('video.webm');
	}

	function createFile(fullPath) {
	window.fileSystem.root.getFile(fullPath, {
	create: true
	/* exclusive: true */
	},
	function(fileEntry) {
	log('Created file: ' + fileEntry.fullPath);
	getVideo(fileEntry);
	}, handleError);
	}

	function writeToFile(fileEntry, blob) {
	// Create a FileWriter object for fileEntry
	fileEntry.createWriter(function(fileWriter) {
	fileWriter.onwriteend = function() {
	// read from file
	log('Wrote to file ' + fileEntry.fullPath);
	readFromFile(fileEntry.fullPath);
	};
	fileWriter.onerror = function(e) {
	log('Write failed: ' + e.toString());
	};
	// Create a new Blob and write it to file
	fileWriter.write(blob);
	}, handleError);
	}

	function readFromFile(fullPath) {
	window.fileSystem.root.getFile(fullPath, {}, function(fileEntry) {
	// Get a File object representing the file
	// then use FileReader to read its contents
	fileEntry.file(function(file) {
	var reader = new FileReader();
	reader.onloadend = function() {
	// video.src = this.result;
	video.src = URL.createObjectURL(new Blob([this.result]));
	};
	// reader.readAsDataURL(file);
	reader.readAsArrayBuffer(file);
	}, handleError);
	}, handleError);
	}

	function handleError(e) {
	switch (e.code) {
	case FileError.QUOTA_EXCEEDED_ERR:
	log('QUOTA_EXCEEDED_ERR');
	break;
	case FileError.NOT_FOUND_ERR:
	log('NOT_FOUND_ERR');
	break;
	case FileError.SECURITY_ERR:
	log('SECURITY_ERR');
	break;
	case FileError.INVALID_MODIFICATION_ERR:
	log('INVALID_MODIFICATION_ERR');
	break;
	case FileError.INVALID_STATE_ERR:
	log('INVALID_STATE_ERR');
	break;
	default:
	log('Unknown error');
	break;
	}
	}

	var data = document.getElementById('data');

	function log(text) {
	data.innerHTML += text + '<br />';
	}

	document.querySelector('video').addEventListener('loadedmetadata', function() {
	var fileName = this.currentSrc.replace(/^.*[\\/]/, '');
	document.querySelector('#videoSrc').innerHTML = 'currentSrc: ' + fileName +
	'<br /> videoWidth: ' + this.videoWidth + 'px<br /> videoHeight: ' +
	this.videoHeight + 'px';
	});
	</script>
	</body>
	</html>