在html中选择和显示音频和视频

selecting and displaying audio and video in html

本文关键字：显示 视频 音频 选择 html      更新时间：2023-09-26

我正在编写一个程序，允许用户选择和显示图像，音频和视频，我目前有图像部分工作。我遵循了w3schools上的所有示例，我认为我仍然有问题，我使用java脚本和选择，而不是像示例中那样陈述特定的文件，但对于这项任务，我必须允许用户从硬盘中进行选择。这是我目前所掌握的重要章节。

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah')
                .attr('src', e.target.result)
                .width(150)
                .height(200);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>

应用程序的工作图像部分的HTML 

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Image</h1>
        <a href="#page" data-icon="gear" class="ui-btn-right">Back</a>
    </div>
    <div data-role="content">
        <input type='file' accept="image/*" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

非工作音频部分

<input type='file' accept="audio/*" onchange="readURL(this);" /> 
<audio controls>
    <source id="blah" src="#" type="audio/ogg">
    <source id="blah" src="#" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

非工作视频部分

<input type='file' accept="video/*" onchange="readURL(this);" />

<video width="320" height="240" controls autoplay>
    <source id="blah" src="#" type="video/ogg">
    <source id="blah" src="#" type="video/mp4">
    <source id="blah" src="#" type="video/webm">
    <source id="blah" src="#" type="video/">
    <object data="movie.mp4" width="320" height="240">
        <embed width="320" height="240" id="blah" src="#.swf">
    </object>
</video>

你违反了一个重要的HTML规则:ID是唯一的，类是可重用的。HTML的工作图像部分是唯一包含1 ID #之类的部分。参考:http://webdesign.about.com/cs/css/qt/tipcssclassvsid.htm

此外，如果这不是问题:我也尝试过<input type="file">，并且它还不是一种稳定的获取文件的方式(稍后会有)。为什么?

  1. 输入所检索的URL因浏览器而异。有些只会得到文件名(webkit)，有些会得到父目录，有些可能会得到完整路径。
  2. 完整的文件系统API仅支持最新版本的Google Chrome，并且到目前为止还没有提供跨浏览器的解决方案。参考: http://www.html5rocks.com/en/tutorials/file/filesystem/

最后一个参考，如果你想知道文件输入的确切规格:参考: http://www.w3.org/TR/html5/forms.html file-upload-state——(type =文件)

相关文章：