Question

我正在尝试使用<video标签播放用户上传的视频，但是由于某种原因，它似乎没有加载到DOM中。这是我的代码：

function Videos ({uploadedFiles}){

    if (uploadedFiles) {
            console.log(uploadedFiles[0])
            return(
                <div>
                    <h3>Videos</h3>

                        <video controls width="400">
                            <source src={uploadedFiles[0]} type="video/mp4"/>
                            Your browser does not support HTML5 video.
                        </video>

                </div>
            )
    } else return(<div> <h2> No Video Uploaded </h2></div>)
}

当我做console.log(uploadedFiles[0])时，我得到y2mate.com - after_effect_countdown_10_seconds_iDO9J_3OVJ0_1080p.mp4，它应该在视频标签中作为src使用。我的文档类型是html。有什么想法我做错了吗？

Answer 1

“我正在尝试播放用户使用<video>标签上传的视频，但是由于某种原因，它似乎并未加载到DOM中”

尝试下面显示的方法，看看它是否更好。如果成功，则对您的代码应用类似的逻辑。这意味着使用 blob 代替src={uploadedFiles[0]}。

<!DOCTYPE html>
<html>
<body>

<p> Choose A Video File... </p>
<input type="file" id="fileChooser" accept="*/*"/>

<div>
<a id="aTag"> </a>
</div>

<script>

document.getElementById('fileChooser').addEventListener('change', onFileSelected, false);

function onFileSelected(evt) 
{
    var file = evt.target.files[0]; // FileList object
    var type = file.type;

    var fileURL = URL.createObjectURL(file);

    var reader = new FileReader();
    reader.readAsDataURL(file);

    var tmpElement; //# represents new video tag element....
    var path; //will hold URL of file BLOB (not file path)....

    reader.onloadend = function(evt) 
    {

        if (evt.target.readyState == FileReader.DONE) 
        {
            //# update file path...
            path = (window.URL || window.webkitURL).createObjectURL(file);

            //# remove any other existing media element...
            var container = document.getElementById("aTag");
            container.removeChild(container.childNodes[0]); 

            tmpElement = document.createElement( "video");
            tmpElement.setAttribute("controls", "true" );
            tmpElement.setAttribute("width", "800");

            //# add newly created HTML5 element with file path
            tmpElement.setAttribute("src", path);
            container.appendChild(tmpElement);
        }
    };

}

</script>

</body>
</html>

我的HTML5视频标签未播放视频

1 个答案: