当前位置: 首页 > dplayer播放器>阅读正文

dplayer实现截图功能

2021.4.15 朱丰华 1100 次 留下评论 1219字

分析:要实现截图功能,就要会设置跨域,点击查看此篇文章

若链接文章不可用, 这里再分析一次, 也就是让你的服务器, 增加一个响应头信息, 这样浏览器就会认为你允许跨域, 如 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>

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注