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>