需要实现的功能:
本地选择一个MP4视频文件,选中之后转成blob格式文件并且在页面播放
代码如下:
<body>
<div class="index">
<input type="file" accept="video/*" name="video" onchange="uploadVideo(this)">
<video id="video_review" controls="controls" src=""></video>
<div id="output"></div>
<button class="look_video">看视频</button>
</div>
</body>
<script>
function uploadVideo(e) {
var videoFile = event.target.files[0]; //选择的文件
var dataa = window.URL.createObjectURL(new Blob([videoFile]));
console.log("视频地址" + dataa);
$("#video_review").attr("src", dataa);
</script>
本地的html文件我都调试完成没问题,接入七牛里面的时候发现input的onchange失效,在七牛'FilesAdded'里面读取不到文件本身
'FilesAdded': function (up, files) {
var videoFile = files[0]; //选择的文件
var video_bolb = window.URL.createObjectURL(new Blob([videoFile]));
console.log("视频地址" + video_bolb);
$("#video_review").attr("src", video_bolb);
$(".look_video").on("click", function () {
$("#video_review").show();
document.getElementById("video_review").play();
});
}
结果转成blob之后提示我不能播放视频,提示:
allvideo.js:190 Uncaught (in promise) DOMException: The element has no supported sources.
然后我打断点调试的时候发现
这个变量读取成红框里“File”
而七牛里面成了“n”
并且在七牛里面,找不到方法读取file文件本身,求大神帮忙看一下该如何解决,谢谢