如何在 html 中设置视频源？

Posted 2023-05-07

【中文标题】如何在 html 中设置视频源？

【英文标题】：How can I set video source in html?

【发布时间】：2016-08-19 08:39:46

【问题描述】：

我需要一种方法让用户选择本地视频文件作为我的 html 视频元素的源。

设置源似乎不起作用，因为我无法从标准 javascript 文件对话框访问完整路径。

我尝试了以下方法：

//THE VIDEO ELEMENT
<video id="video1" muted>
     <source src="" type="video/mp4" />
</video>

//THE DIALOG BUTTON TO SET VIDEO SOURCE
<input type='file' onchange="readURL(this);" />

<script>
  var video = document.getElementById("video1");

  function readURL(input) 
    //THE METHOD THAT SHOULD SET THE VIDEO SOURCE
    if (input.files && input.files[0]) 
      var reader = new FileReader();
      reader.onload = function (e) 
        video.src = input.files[0]
      ;
    
  
</script>

如何创建一个允许选择本地视频文件并将其上传到 HTML5 视频元素的按钮？

【问题讨论】：

Play local (hard-drive) video file with HTML5 video tag?的可能重复

【参考方案1】：

我做了一些更改，工作正常！我在 Chrome 和 Firefox 中进行了测试。

//THE VIDEO ELEMENT
<video id="video1" muted>
    <source src="" type="video/mp4" />
</video>

//THE DIALOG BUTTON TO SET VIDEO SOURCE
<input id="file" type='file' onchange="readURL(this);" />

<script>
    var video = document.getElementById("video1");

    function readURL(input) 
        //THE METHOD THAT SHOULD SET THE VIDEO SOURCE
        if (input.files && input.files[0]) 
            var file = input.files[0];
            var url = URL.createObjectURL(file);
            console.log(url);
            var reader = new FileReader();
            reader.onload = function() 
                video.src = url;
                video.play();
            
            reader.readAsDataURL(file);
        
    
</script>

【参考方案2】：

对于我自己，我在 分开的 js 和 html 文件中解决了这个问题，如下所示： html:<input id="file" type='file'/>

javascript：

document.getElementById('file').onchange = function()
        console.log('test');
        readURL(this);
    

function readURL(input) 
    //THE METHOD THAT SHOULD SET THE VIDEO SOURCE
    if (input.files && input.files[0]) 
        var file = input.files[0];
        var url = URL.createObjectURL(file);
        console.log(url);
        var video = document.getElementById("video1");
        var reader = new FileReader();
        reader.onload = function() 
            video.src = url;
            video.play();
        
        reader.readAsDataURL(file);