短视频解析单页源码

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 这个一个网页html解析短视频无水印视频的源码,电脑直接打开也可以本地使用,也可以上传到网站搭建成网页使用。

这个一个网页html解析短视频无水印视频的源码,电脑直接打开也可以本地使用,也可以上传到网站搭建成网页使用。
image.png
代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>短视频解析</title>
    <meta name="renderer" content="webkit">
    <meta name="referrer" content="never">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.7.6/css/layui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.7.6/layui.min.js"></script>
</head>
<style>
body {
    
    max-width: 500px;margin: auto;}
.main {
    
    padding:6px 6px;margin:auto;background-color: white;}
.tt {
    
    color: #1aa700;font-size: 1.2rem;font-weight: 700;padding: 8px;}
.center {
    
    text-align: center;}
</style>
<body>
<!-- 获取更多源码:www.qqmu.com -->
    <div class="main">
        <blockquote class="layui-elem-quote tt">短视频解析</blockquote>
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card-body" id="player" style="display: none;">
                    <div class="layui-form-item" style="margin: 0 10px 10px 10px;">
                        <video name="video" id="video" width="100%" controls autoplay loop></video>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card-body">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">输入分享链接</label>
                            <div class="layui-input-block">
                            <textarea name="link" id="link" placeholder="请输入内容" class="layui-textarea">https://v.kuaishou.com/74k3H0</textarea>
                            </div>
                        </div>
                        <input type="text" name="downloadurl" style="display: none;">
                        <input type="text" name="filename" style="display: none;">
                        <div class="layui-form-item center">
                        <button class="layui-btn" lay-submit="" lay-filter="Submit">提交</button>
                        <button class="layui-btn" lay-submit="" lay-filter="Remove">再来一个</button>
                        <button class="layui-btn" lay-submit="" id="download" style="display: none;" lay-filter="Download">下载</button>
                        </div>
                    </form>
                </div>
                <div id="Result" style="display: none;">
                    <div class="layui-card-header">解析结果</div>
                    <div class="layui-card-body">
                        <div class="layui-field-box">
                            <div style="margin-top: 0px;">
                            <p><span class="layui-badge">uid</span> <span id="uid"></span></p>
                            <p><span class="layui-badge">author</span> <span id="author"></span></p>
                            <p><span class="layui-badge">create_time</span> <span id="create_time"></span></p>
                            <p><span class="layui-badge">desc</span> <span id="desc"></span></p>
                            <p><span class="layui-badge">video_id</span> <span id="video_id"></span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    layui.use(['form'], function(){
    
    
        var form = layui.form
        ,$ = layui.jquery
        ,layer = layui.layer;

        form.on('submit(Submit)', function(data){
    
    
            var link = data.field.link;
            if (link.length === 0) {
    
    
                layer.alert('请输入您要解析的内容!', {
    
     title: '提示' })
                return false;
            }

            var i = link.lastIndexOf("https://");
            i = i === -1 ? link.lastIndexOf("http://") : i;
            var url = link.substr(i);
            var index = layer.load(0, {
    
    shade: false});
            $.ajax({
    
    
                type: 'GET',
                url: 'https://api.qoc.cc/api/video?url=' + url,
                success: function(s) {
    
    
                    if (s.code === 200) {
    
    
                        var filename = s.data.title
                        var videourl = s.data.url;
                        $('#author').html(s.data.author);
                        $('#uid').html(s.data.uid);
                        $('#create_time').html(s.data.time);
                        $('#desc').html(s.data.title);
                        $('#video_id').html(s.data.like);
                        $('#title').html(filename);
                        $('#download').show();
                        $('#Result').show();
                        $('#vice').show();
                        downloadBlobFile('get', videourl).onreadystatechange = res=>{
    
    
                            if (res.currentTarget.readyState == 4 && res.currentTarget.status == 200) {
    
    
                                const url = window.URL.createObjectURL(res.currentTarget.response);
                                $('#video').attr('src',url);
                                $('#player').show();
                                $("input[name=downloadurl]").val(url);
                            }
                        }
                        $("input[name=filename]").val(filename);
                        document.title = filename;
                    } else {
    
    
                        layer.msg(s.message);
                    }
                    layer.close(index);
                }
            });
            return false;
        });

        form.on('submit(Remove)', function(data){
    
    
            $("#Result").hide();
            $("#link").val('');
            $('#video').attr('src','');
            $('#download').hide();
            $('#player').hide();
            $('#vice').hide();
            return false;
        });

        form.on('submit(Download)', function(data){
    
    
            downloadBlobFile('get',data.field.downloadurl).onreadystatechange = res=>{
    
    
                if(res.currentTarget.readyState == 4 &&  res.currentTarget.status==200){
    
    
                    const url = window.URL.createObjectURL(res.currentTarget.response);
                    let a = document.createElement('a');
                    a.href=url;
                    a.download = data.field.filename;
                    a.click();
                }
            }
            return false;
        });

        function downloadBlobFile(_method,_url){
    
    
            const request = new XMLHttpRequest();
            request.open(_method,_url);
            request.send();
            request.responseType = 'blob';
            return request;
        }
        function isClipboardAPIEnabled() {
    
    
            return !!(navigator.clipboard && navigator.clipboard.readText);
        }
        function addClipboardEventListener() {
    
    
            var pasteButton = document.getElementById('paste-button');
            pasteButton.addEventListener('click', async function() {
    
    
                try {
    
    
                    var text = await navigator.clipboard.readText();
                    $('#link').val(text);
                } catch (err) {
    
    
                    console.error('An error occurred while reading clipboard contents:', err);
                }
            });
        }
        if (!isClipboardAPIEnabled()) {
    
    
            document.getElementById('paste-button').style.display = 'block';
            addClipboardEventListener();
        }
    });
</script>
</body>
</html>
相关文章
|
1月前
|
算法 测试技术 C语言
深入理解HTTP/2:nghttp2库源码解析及客户端实现示例
通过解析nghttp2库的源码和实现一个简单的HTTP/2客户端示例,本文详细介绍了HTTP/2的关键特性和nghttp2的核心实现。了解这些内容可以帮助开发者更好地理解HTTP/2协议,提高Web应用的性能和用户体验。对于实际开发中的应用,可以根据需要进一步优化和扩展代码,以满足具体需求。
155 29
|
1月前
|
前端开发 数据安全/隐私保护 CDN
二次元聚合短视频解析去水印系统源码
二次元聚合短视频解析去水印系统源码
56 3
|
1月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
移动开发 前端开发 JavaScript
从入门到精通:H5游戏源码开发技术全解析与未来趋势洞察
H5游戏凭借其跨平台、易传播和开发成本低的优势,近年来发展迅猛。接下来,让我们深入了解 H5 游戏源码开发的技术教程以及未来的发展趋势。
|
1月前
|
负载均衡 JavaScript 前端开发
分片上传技术全解析:原理、优势与应用(含简单实现源码)
分片上传通过将大文件分割成多个小的片段或块,然后并行或顺序地上传这些片段,从而提高上传效率和可靠性,特别适用于大文件的上传场景,尤其是在网络环境不佳时,分片上传能有效提高上传体验。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
存储 前端开发 JavaScript
在线教育网课系统源码开发指南:功能设计与技术实现深度解析
在线教育网课系统是近年来发展迅猛的教育形式的核心载体,具备用户管理、课程管理、教学互动、学习评估等功能。本文从功能和技术两方面解析其源码开发,涵盖前端(HTML5、CSS3、JavaScript等)、后端(Java、Python等)、流媒体及云计算技术,并强调安全性、稳定性和用户体验的重要性。
|
2月前
|
机器学习/深度学习 自然语言处理 算法
生成式 AI 大语言模型(LLMs)核心算法及源码解析:预训练篇
生成式 AI 大语言模型(LLMs)核心算法及源码解析:预训练篇
206 0
|
4月前
|
存储 设计模式 算法
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对象间分配行为。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象行为模式比类行为模式具有更大的灵活性。 行为型模式分为: • 模板方法模式 • 策略模式 • 命令模式 • 职责链模式 • 状态模式 • 观察者模式 • 中介者模式 • 迭代器模式 • 访问者模式 • 备忘录模式 • 解释器模式
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
|
3月前
|
自然语言处理 数据处理 索引
mindspeed-llm源码解析(一)preprocess_data
mindspeed-llm是昇腾模型套件代码仓,原来叫"modelLink"。这篇文章带大家阅读一下数据处理脚本preprocess_data.py(基于1.0.0分支),数据处理是模型训练的第一步,经常会用到。
113 0
|
5月前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
166 2

推荐镜像

更多