Question

我使用输入标记和type =“file”属性来获取视频文件，并使用java脚本调用播放视频的函数。我在我的电脑上使用镀铬但不能在移动设备（Android手机和ipad）上播放。以下是我的代码。我坚持这一点，非常感谢任何帮助。

<!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>

Answer 1

FileReader浏览器支持非常有限，并且与少量错误相关联，我已经在 Android chrome 45 中尝试了您的代码，但它也没有在那里工作。

请参阅http://caniuse.com/#feat=filereader以了解FileReader支持的浏览器。另请查看底部的已知问题部分，其中指出iOS和webkit
中有错误

由于FileReader不是一个稳定的解决方案，我建议您server side使用此类实用程序

HTML5视频标记在移动设备中无效

1 个答案: