如何从视频创建 Blob URL 并分配给视频源？答案

【问题标题】：How to create Blob URL from video and assign to video source?如何从视频创建 Blob URL 并分配给视频源？
【发布时间】：2020-05-19 12:40:35
【问题描述】：

我正在网页上显示视频。但我希望最终用户不要从浏览器下载视频。我想阻止下载视频。

我的问题是我们可以在 PHP 中创建一个缓冲区数组吗？并使用 Javascript 从缓冲区数组创建 Blob URL。然后我可以将 Blob URL 分配给视频标签。

视频不在同一个域中。它在 CDN 上。

有可能吗？

【问题讨论】：

标签： javascript php html5-video

【解决方案1】：

你可以做这样的事情来从 php 中获取一个字节块，

$CHUNK_SIZE = 1024*1024; //buffer size in bytes
$handle = fopen($filename, 'rb');

$start = $_GET['position'];

//point to last serve position
fseek($handle, $start);

//read and send byte chunk
$buffer = fread($handle, CHUNK_SIZE);
echo $buffer;
ob_flush();
flush();

在 javascript 大小上使用 xhr (ajax) 调用这个 php 脚本并将字节数组推送到视频元素流。

//using media source api. Check for browser compatibility
var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', mediaSourceOpen);

var mimeType = 'video/mp4';
var sourceBuffer = mediaSource.addSourceBuffer(mimeType);

//get the vide element and attach source
var player = document.getElementById('player');
player.src = window.URL.createObjectURL(mediaSource);

var start = 0;
function mediaSourceOpen() {
  fetchData();
}

function fetchData(){
  fetch('URL_TO_PHP_SCRIPT?start=' + start)
  .then(response => {
     return response.arrayBuffer()
  }).then(buffer => {
     if(buffer.byteLength > 0)
        start += buffer.byteLength;
        sourceBuffer.appendBuffer(buffer);
        fetchData();
     }
  });
}

代码不包含错误处理。只是主要场景。将其视为伪代码并执行您的实现。我也会尝试发布一个工作样本

【讨论】：