记录自己的HTML5网页中实现视频播放 采用开源DPlayer
采用开源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> 第四步保存打开网页看效果
完成了,以后就可以给自己的网页载入播放器了
HTML5载入播放器 文章被收录于专栏
记录一次HTML5实现DPlayer播放器
