如何通过 API “input type='file'” 标签使用本地文件更改视频源...没有 Jquery 或外部库

Posted 2023-02-25

【中文标题】如何通过 API “input type=\'file\'” 标签使用本地文件更改视频源...没有 Jquery 或外部库

【英文标题】：How to change video source with local file via API "input type='file' " tag...NO Jquery or external libraries如何通过 API “input type='file'” 标签使用本地文件更改视频源...没有 Jquery 或外部库

【发布时间】：2015-09-02 04:31:06

【问题描述】：

我正在尝试通过 API “input type='file'” 标签使用本地文件更改 html5 视频源。此 HTML 脚本旨在仅在本地运行以播放我的高清视频，但我无法获得“输入”标签来选择和播放我的高清视频文件。 jsfiddle example

HTML

<!----------------HOW to cahnge VID source Localy--------------------->
<p>working example</p>
<div id="selectFile">
<p>Change VID:
    <br>

    <button onclick="changeVID()">Change VID</button>

</div>
<div>
<video muted controls  id="videoPlayer" >
        <source id='currentVID' src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">

    </video>
</div>
<!----------desired result--------------->
<br>
<div id="desired result" style="background-color:grey;">
<p>desired result</p>
<br>

<div id="selectFile">
<p>Change local VID:
    <br>
<input id="newlocalFILE" name="localfile" size="50" maxlength="100000"
    accept="text/*" type="file" onchange="playlocalVID();">

</div>
<div>
<video muted controls  id="videoPlayer" >
        <source id='currentVID' src="c:\LocalVID.mp4" type="video/mp4">

    </video>
</div>
</div>

javascript

/***********working example****************/

function changeVID()
        var player = document.getElementById("videoPlayer");
        var currentVID = document.getElementById('currentVID');
        currentVID.setAttribute('src', "http://media.w3.org/2010/05/sintel/trailer.mp4");
        player.load();
        player.play();



/***********desired result****************/


function CangelocalVID()
        var player = document.getElementById("videoPlayer");
        var currentVID =  document.getElementById('currentVID');
        var selectedLocalVID = document.getElementById('newlocalFILE').value;
        currentVID.setAttribute('src',selectedLocalVID);
        player.load();
        player.play();

【问题讨论】：

您是否尝试过添加文件协议？ file:///c:/path/to/file 注意三斜杠需要存在

【参考方案1】：

编辑、更新

视频上传处理程序的名称 playlocalVID 替换为 CangelocalVID ； document.getElementById('newlocalFILE').files[0] 为 document.getElementById('newlocalFILE').value ;尝试使用来自Creative Commons - Science Commons 的视频"Science Commons" ；似乎上传，从本地上传的 jsfiddle 播放视频

---

尝试将 input 元素的 accept 属性调整为 video/* ，利用 Blob of File 对象从 selectedLocalVID.files[0] 创建 objectURL 以设置 src 属性currentVID

---

function playlocalVID() 
  var player = document.getElementById("videoPlayer");
  var currentVID = document.getElementById("currentVID");
  var selectedLocalVID = document.getElementById("newlocalFILE").files[0];
  currentVID.setAttribute("src", URL.createObjectURL(selectedLocalVID));
  player.load();
  player.play();

<div id="desired result" style="background-color:grey;">
  <p>desired result</p>
  <br>
  <div id="selectFile">
    <p>Change local VID:
      <br>
      <input id="newlocalFILE" name="localfile" size="50" maxlength="100000" accept="video/*" type="file" onchange="playlocalVID();">
  </div>
  <div>
    <video muted controls id="videoPlayer">
      <source id="currentVID" src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4">
    </video>
  </div>
</div>

jsfiddle https://jsfiddle.net/q3hhk17e/12/

【讨论】：

我尝试了 jsfiddle 脚本和上面发布的脚本，我还更改了 onchange 事件以匹配 firefox 和 chrome 中的函数名称......仍然没有运气，谢谢guest271314 你尝试解决我的问题，它给了我一些新的想法。我会继续努力

谢谢！！！ [ guest271314](***.com/users/2801559/guest271314) 我找到了另一个 [ jsfiddle 工作示例](jsfiddle.net/dsbonev/cCCZ2/presentation) 但我很难读懂我正在简化和解释它以匹配我的脚本时看到你更新的答案女巫保存我做了一些试验和错误。你的更容易理解...谢谢 [guest271314](***.com/users/2801559/guest271314)

您不需要将其转换为Blob，URL.createObjectURL() 确实接受File 对象。

【参考方案2】：

这是最简单的解决方案。 适用于 Chrome 和 ios Safari。Try it on Codepen

function changeVideo() 
  var chosenFile = document.getElementById("myFile").files[0];
  document.getElementById("theVideo").setAttribute("src", URL.createObjectURL(chosenFile));


document.getElementById("myFile").addEventListener("change", changeVideo);

<input type="file" id="myFile"><br>
<video controls id="theVideo">

【讨论】：

这是最简单的解决方案，IDK 为什么人们看不到它。

【参考方案3】：

最终工作答案jsfiddle

HTML

<p>Change local VID:</p>
    <input id="newlocalFILE" name="localfile" size="50" maxlength="100000"
   accept="video/*" type="file" onchange="playlocalVID()">
<video muted controls  id="videoPlayer" >
         <source id='currentVID' src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">
 </video>

JAVASCRIPT

function playlocalVID() 


  var currentVID = document.getElementById('currentVID');
  var selectedLocalVID = document.getElementById('newlocalFILE').files[0];
  currentVID.setAttribute('src', URL.createObjectURL(new  Blob([selectedLocalVID])));
  player.load();
  player.play();
  var SelectedFileName = document.getElementById('newlocalFILE').value;

【讨论】：

您不需要将其转换为Blob，URL.createObjectURL() 确实接受File 对象。