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>

 

// html
<div id="dplayer"></div>

<input type="url" name="video_url" />
<button class="play">播放</button>

// JavaScript  这里用的jQuery
<script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mp4',
    },
});

$(".play").on("click",function(){
        let url = $(input).val();
        dp.switchVideo(
            {
                url: url,
                pic: 'second.png',
                thumbnails: 'second.jpg',
            }
        );
})

</script>