我的 HTML5 视频标签没有播放视频 [英] My HTML5 video tag is not playing the video
问题描述
我正在尝试播放用户使用 <video 标签上传的视频，但由于某种原因它似乎没有加载到 DOM.这是我的代码:
函数视频({uploadedFiles}){如果(上传的文件){console.log(上传文件[0])返回(<div><h3>视频</h3><视频控件宽度="400"><source src={uploadedFiles[0]} type="video/mp4"/>您的浏览器不支持 HTML5 视频.</视频>)} else return(<div><h2>没有上传视频</h2></div>)}
当我做 console.log(uploadedFiles[0]) 我得到 y2mate.com - after_effect_countdown_10_seconds_iDO9J_3OVJ0_1080p.mp4 应该在视频标签内作为 源代码.我的文档类型是 html.我哪里出错了?
我正在尝试播放用户使用
<video>标签上传的视频，但由于某种原因它似乎没有加载到 DOM"
试试下面显示的方法，看看效果是否更好.如果成功，则将类似的逻辑应用于您的代码.这意味着使用 blob 而不是 src={uploadedFiles[0]}.
<身体><p>选择视频文件... </p><input type="file" id="fileChooser" accept="*/*"/><div><a id="aTag"></a><脚本>document.getElementById('fileChooser').addEventListener('change', onFileSelected, false);函数 onFileSelected(evt){var 文件 = evt.target.files[0];//文件列表对象var type = file.type;var fileURL = URL.createObjectURL(file);var reader = new FileReader();reader.readAsDataURL(文件)；var tmpElement;//# 代表新的视频标签元素....变量路径；//将保存文件 BLOB 的 URL(不是文件路径)...reader.onloadend = 函数(evt){if (evt.target.readyState == FileReader.DONE){//# 更新文件路径...path = (window.URL || window.webkitURL).createObjectURL(file);//# 删除任何其他现有的媒体元素...var container = document.getElementById("aTag");container.removeChild(container.childNodes[0]);tmpElement = document.createElement("视频");tmpElement.setAttribute("控件", "true" );tmpElement.setAttribute("width", "800");//# 添加新创建的带有文件路径的 HTML5 元素tmpElement.setAttribute("src", path);container.appendChild(tmpElement);}};}</html>
Im trying to play a video uploaded by the user using the <video tag but it doesnt seem to be loading to the DOM for some reason. Here is my code:
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>)
}
When i do console.log(uploadedFiles[0]) i get y2mate.com - after_effect_countdown_10_seconds_iDO9J_3OVJ0_1080p.mp4 which should work inside the video tag as the src. My doctype is html. Any ideas where im going wrong?
"I'm trying to play a video uploaded by the user using the
<video>tag but it doesn' seem to be loading to the DOM for some reason"
Try the way shown below and see if it works better. If successful, then apply a similar logic to your code. This means using a blob instead of a 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 视频标签没有播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
