采用开源DPlayer实现HTML5网页视频播放

第一步查看官网看看大概怎么弄

第二步准备资源  我采用cdn 主要懒得下载


第三步开始编写

复制引入 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.css">
               <script src="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.js"></script>



示例代码: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/logo.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.css">
	</head>
	<body>

		<div id="dplayer"></div>
		<script src="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.js"></script>
		<script type="text/javascript">
			var dp = new DPlayer({
			    container: document.getElementById('dplayer'),
			    screenshot: true,
			    video: {
			        url: 'img/aigei.mp4',
			        pic: 'img/papers.co-hp89-kpop-blackpink-girl-red-lips-23-wallpaper.jpg',
			        thumbnails: 'img/papers.co-hp89-kpop-blackpink-girl-red-lips-23-wallpaper.jpg',
			    },
			});
		</script>
	</body>
</html>

第四步保存打开网页看效果



完成了,以后就可以给自己的网页载入播放器了