0

需要实现的功能:
本地选择一个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.

然后我打断点调试的时候发现

clipboard.png

这个变量读取成红框里“File”

clipboard.png

而七牛里面成了“n”
并且在七牛里面,找不到方法读取file文件本身,求大神帮忙看一下该如何解决,谢谢

jenson 4
2018-12-17 提问
0 个回答

撰写答案

推广链接