mp4开始时间html(1) - 芒果文档

📌 相关文章

📜 mp4开始时间html(1)

📅 最后修改于: 2023-12-03 15:32:58.403000 🧑 作者: Mango

获取MP4文件开始时间的HTML

在使用MP4文件时，有时候需要获取文件的开始时间。本文将介绍如何使用HTML和JavaScript获取MP4文件的开始时间。

HTML代码片段

以下是可以用作展示和测试的HTML代码片段。你可以将其保存为.html文件并在浏览器中打开。

<!doctype html>
<html>
<head>
    <title>获取MP4文件开始时间的HTML</title>
</head>
<body>
    <div>
        <label for="mp4-url">MP4文件URL:</label>
        <input type="text" id="mp4-url" name="mp4-url" value="">
        <button id="get-start-time" onclick="getStartTime()">获取开始时间</button>
    </div>
    <div>
        <label for="start-time">开始时间:</label>
        <input type="text" id="start-time" name="start-time" value="">
    </div>

    <script>
        function getStartTime() {
            var url = document.getElementById("mp4-url").value;
            var req = new XMLHttpRequest();
            req.open('GET', url,true);
            req.setRequestHeader('Range', 'bytes=0-23');
            req.setRequestHeader('Content-Type', 'video/mp4');
            req.onreadystatechange = function () {
                if (req.readyState == XMLHttpRequest.DONE && req.status == 206) {
                    var startByte = new DataView(req.response).getUint32(4);
                    var startTime = new Date((startByte / 90000)).toISOString().substr(11, 8);
                    console.log(startTime);
                    document.getElementById("start-time").value = startTime;
                }
            };
            req.send();
        }
    </script>
</body>
</html>

解释说明

上面的HTML代码片段包括一个文本框和一个按钮。用户可以在文本框中输入MP4文件的URL，然后单击按钮获取该文件的开始时间。

当用户单击“获取开始时间”按钮时，页面上的JavaScript代码将执行以下操作：

获取用户输入框中提供的MP4文件的URL。
创建一个HTTP GET请求，并将请求头中Range设置为“bytes=0-23”，这意味着我们只请求文件的前24个字节。
发送HTTP GET请求，当请求完成时，读取响应的前4个字节，并从中读取开始字节的偏移量。
将开始字节偏移量除以90,000（这是视频每秒的片段数），然后将其转换为ISO时间格式。
在页面上显示开始时间。

总结

这个HTML代码片段演示了如何使用JavaScript从MP4文件中获取开始时间。如果你需要使用它，请继续完善并自由使用。