Html5选择本地视频音频文件播放

最新推荐文章于 2023-06-28 08:21:28 发布

转载最新推荐文章于 2023-06-28 08:21:28 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CielWater/p/4255946.html

文章标签：

#javascript #前端 #ffmpeg #ViewUI

本文介绍了一种利用jQuery实现的动态加载视频的方法。通过监听文件输入框的变化，可以将用户选择的视频文件实时地加载到网页中进行播放。该方案还包含了对加载视频源的释放操作以避免内存泄漏。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../Script/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#File").change(function (file) {
                $("body").append(file.target.files[0]);
                var url = window.URL.createObjectURL(file.target.files[0]);
                $("#player")[0].src = url;
                $("#player")[0].onload = function () {
                    window.URL.revokeObjectURL(src);
                };
                $("#player").css({ "width": "100%", "height": "100%" });
            });
        });
    </script>
</head>
<body>
    <input id="File" type="file" id="file" />
    <video id="player"autoplay="autoplay">
                    </video>
</body>
</html>