分析:要实现截图功能,就要会设置跨域,点击查看此篇文章
若链接文章不可用, 这里再分析一次, 也就是让你的服务器, 增加一个响应头信息, 这样浏览器就会认为你允许跨域, 如 nginx 服务器在配置文件的server中添加
server{
.....
add_header Access-Control-Allow-Origin *;
.....拷贝上面这一行即可, 只是为了告诉你此行信息写在哪个位置
}
这里进行演示并提供代码,可直接拷贝到任意地方测试
<!DOCTYPE html>
<html>
<head>
<title>52的小窝提供跨域测试代码</title>
</head>
<body>
<!-- 新建一个html,创建一个div -->
<div id="player2" ></div>
<!-- 引用css和js -->
<link href="https://cdn.5252.online/ajax/dplayer/dplayer.min.css" rel="stylesheet">
<script src="https://cdn.5252.online/ajax/dplayer/dplayer.min.js"></script>
<!-- 然后新建一个script,填写脚本 -->
<script>
var dp = new DPlayer({
element: document.getElementById('player2'),//player元素
autoplay: false,//自动播放
theme: '#FADFA3',//主题颜色
loop: true,// 循环播放
lang: 'zh-CN',//语言
hotkey: true,//绑定热键
preload: 'auto',//预加载的方式
screenshot: true,//视频截图已实现
video: {//视频信息
url: 'https://cdn.5252.online/video/mov_bbb.mp4',//视频网址
pic: 'https://cdn.5252.online/image/logo.jpg'//视频封面
},
});
</script>
</body>
</html>
本篇完,还有疑问?留下评论吧