我的 HTML5 视频标签没有播放视频答案

【问题标题】：My HTML5 video tag is not playing the video我的 HTML5 视频标签没有播放视频
【发布时间】：2019-08-12 17:31:11
【问题描述】：

我正在尝试播放用户使用<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。任何想法我哪里出错了？

【问题讨论】：

您是指没有用户手势的“自动播放”吗？你试过<video autoplay muted ...>吗？
@devserkan 没有。它根本不玩。视频甚至没有加载
您在 DOM 树中看到正确的源名称了吗？您是否尝试过源名称中没有空格？
@devserkan 当我在将<source> id 更改为视频后执行console.log(document.getElementById('video') 时，我得到空值
当您使用开发人员工具时，您会看到什么？您的意思是设置源后视频标签为空吗？

标签： javascript html reactjs video

【解决方案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>

【讨论】：