Initial heart constant 2021-03-26 00:35 采纳率: 50%
浏览 41

input输入链接传入DPlayer url中并打开播放

input输入链接传入DPlayer url中并打开播放

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://api.qinggx.cn/js_css/DPlayer.min.js"></script>
    <script src="http://api.qinggx.cn/js_css/flv.min.js"></script>
    <script src="http://api.qinggx.cn/js_css/hls.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://api.qinggx.cn/js_css/DPlayer.min.css">
    <style>

    </style>
</head>
<body>


<div id="dplayer" ref="dplayer">

    <script>
        const dp = new DPlayer({

            container: document.getElementById('dplayer'),
            autoplay: true,
            theme: '#FADFA3',
            loop: true,
            lang: 'zh-cn',
            screenshot: true,
            hotkey: true,
            preload: 'auto',
            logo: 'http://api.qinggx.cn/logo.png',
            volume: 0.5,
            mutex: true,
            video: {
                url:'demo.mp4',
                pic: 'dplayer.png',
                // thumbnails: 'thumbnails.jpg',
                //预览图
                type: 'auto',
            },
            subtitle: {
                url: 'dplayer.vtt',
                type: 'webvtt',
                fontSize: '25px',
                bottom: '10%',
                color: '#b7daff',
            },
            contextmenu: [
                {
                    text: 'custom1',
                    link: 'https://github.com/DIYgod/DPlayer',
                },
                {
                    text: 'custom2',
                    click: (player) => {
                        console.log(player);
                    },
                },
            ],
           /* highlight: [
                {
                    time: 20,
                    text: '这是第 20 秒',
                },
                {
                    time: 120,
                    text: '这是 2 分钟',
                },
            ],*/
        });
    </script>
</div>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • 嵌入式小企鹅 2025-07-07 12:29
    关注
    /*try do it*/
    <!doctype html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>DPlayer 示例</title>
        <!-- 推荐使用https协议,避免浏览器混合内容警告 -->
        <script src="https://api.qinggx.cn/js_css/DPlayer.min.js"></script>
        <script src="https://api.qinggx.cn/js_css/flv.min.js"></script>
        <script src="https://api.qinggx.cn/js_css/hls.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://api.qinggx.cn/js_css/DPlayer.min.css" />
        <style>
            /* 播放器容器样式,宽高自适应,居中 */
            body, html {
                margin: 0; padding: 0; height: 100%;
                background-color: #000;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            #dplayer {
                width: 80%;
                max-width: 900px;
                height: 500px;
                max-height: 80vh;
                box-shadow: 0 0 20px rgba(0,0,0,0.8);
                border-radius: 8px;
                overflow: hidden;
            }
            @media (max-width: 600px) {
                #dplayer {
                    width: 100%;
                    height: 300px;
                    max-height: none;
                }
            }
        </style>
    </head>
    <body>
    
    <div id="dplayer"></div>
    
    <script>
        const dp = new DPlayer({
            container: document.getElementById('dplayer'),
            autoplay: true,
            theme: '#FADFA3',
            loop: true,
            lang: 'zh-cn',
            screenshot: true,
            hotkey: true,
            preload: 'auto',
            logo: 'https://api.qinggx.cn/logo.png',
            volume: 0.5,
            mutex: true,
            video: {
                url: 'demo.mp4',  // 视频地址,支持本地或网络
                pic: 'dplayer.png', // 视频封面
                // thumbnails: 'thumbnails.jpg', // 缩略图预览
                type: 'auto',
            },
            subtitle: {
                url: 'dplayer.vtt',
                type: 'webvtt',
                fontSize: '25px',
                bottom: '10%',
                color: '#b7daff',
            },
            contextmenu: [
                {
                    text: '项目地址',
                    link: 'https://github.com/DIYgod/DPlayer',
                },
                {
                    text: '打印播放器对象',
                    click: (player) => {
                        console.log(player);
                    },
                },
            ],
            controls: true,  // 显示控制条,默认true,这里显式声明
            mutex: true,     // 保证只播放一个播放器
            autoplay: true,  // 自动播放
        });
    
        // 监听播放事件示例
        dp.on('play', () => {
            console.log('视频开始播放');
        });
    
        dp.on('pause', () => {
            console.log('视频暂停');
        });
    
        dp.on('ended', () => {
            console.log('视频播放结束');
        });
    
        // 监听截图事件
        dp.on('screenshot', (img) => {
            console.log('截图成功', img);
            // 你可以把img上传到服务器,或者显示到页面
        });
    
        // 监听错误事件,方便调试加载失败
        dp.on('error', () => {
            console.error('视频加载或播放错误');
            alert('视频加载失败,请检查视频地址或网络状态');
        });
    </script>
    
    </body>
    </html>
    
    
    评论

报告相同问题?