我正在尝试播放用户使用 <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 - 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 - 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 视频标签没有播放视频
发布评论