HTML5視頻標記在移動設備中不起作用

我正在使用輸入標記和type =「file」屬性來獲取他的視頻文件並使用調用播放視頻的函數的java腳本。我用我的PC在Chrome上工作，但不能在移動設備上播放（android手機和ipad）。以下是我的代碼。我堅持這一點，非常感謝任何幫助。HTML5視頻標記在移動設備中不起作用

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
<h1> Welcome</h1> 
<h2> Step1.record a video</h2> 
    <form action="{{ upload_url }}" method="POST" enctype="multipart/form-data"> 
     Click this button to start recording, Don't worry you can preview befor uploadiong the video: 
     <input id="uploadImage" type="file" name="video" accept="video/*" onchange="PreviewImage();" capture ><br><br> 
     <input type="submit" name="submit" value="Submit"> 
    </form> 
    <video id="uploadPreview" style="width: 800px; height: 600px;" controls/> 
     <!--<source src="" type="video/mp4">--> 
     <!--<source src="" type="video/ogg">--> 
     <!--<source src="" type="video/webm">--> 
    </video> 
</body> 
<br /> 
<script type="text/javascript"> 
    function PreviewImage() { 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 

     oFReader.onload = function (oFREvent) { 
      var video = document.getElementById("uploadPreview"); 
      video.src = oFREvent.target.result; 
      video.play(); 
     }; 
    }; 
</script> 
</body> 
</html>

來源

2015-10-09 Karthikkumar

FileReader具有非常有限的瀏覽器的支持，並與一些bug相關的，我已經試過你的代碼中的Android鉻45，但它不工作有作爲。

請參閱http://caniuse.com/#feat=filereader瞭解支持的瀏覽器是否爲FileReader。同時經過在底部的已知問題部分它說，它有錯誤在iOS和webkit

作爲FileReader不是一個穩定的解決方案，我建議你去server side用於這些用途

來源

2015-10-09 02:39:26 Rayon

HTML5視頻標記在移動設備中不起作用

回答

相關問題