Html5+DPlayer实现手机端多个视频嵌入播放 支持IPHONE,安卓
目前HTML5自带的视频播放功能在IPHONE上并不好用，会出现，点击播放就全部多个视频一起播放的情况，因此我们考虑使用第三方播放器来实现网页内嵌视频的播放
参考如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="applicable-device" content="mobile">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="must-revalidate,no-cache">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>我是网页标题</title>
<meta name="description" charset="">
<meta name="keywords" content="">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="./images/style.css">
<script type="text/javascript" src="./images/jquery-1.9.1.min.js"></script>
<link href="./images/layer.css" type="text/css" rel="styleSheet" id="layermcss"></head>
<body>
<style type="text/css">
video {
object-fit:inherit;
height: 100%;
width: 100%;
display: block;
}
.lxtx-video {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.lxtx-video video,.lxtx-video object,.lxtx-video embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
<div>
<img src="./images/1.jpg">
<div class="video_one">
<div class="video_one_x">
<div id="dplayer1"></div>
</div>
</div>
<script type="text/javascript">
const dp = new DPlayer({
container: document.getElementById('dplayer1'),
video: {
url: './videos/1.mp4',
},
});
</script>
<img src="./images/3.jpg">
<p id="dj1" class="wx_str"></p>
<img src="./images/5.jpg">
<img src="./images/6.jpg">
<style type="text/css">
video{width: 100%;height: auto;}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video{ position: relative; padding-bottom: 75%; height: 0; overflow: hidden;}
.video embed{ position:absolute; top:0; left:0; width:100%; height:100%; margin-bottom:10px;}
</style>
<div class="video_two">
<div class="video_one_c">
<div id="dplayer2"></div>
<script type="text/javascript">
const dp2 = new DPlayer({
container: document.getElementById('dplayer2'),
video: {
url: './videos/2.mp4',
},
});
</script>
</div>
</div>
<p id="dj2" class="wx_str"></p>
<img src="./images/9.jpg">
<p id="dj3" class="wx_str"></p>
<img src="./images/11.jpg">
<p id="dj4" class="wx_str"></p>
<div class="video_three">
<div class="video_one_v">
<div id="dplayer3"></div>
<script type="text/javascript">
const dp3 = new DPlayer({
container: document.getElementById('dplayer3'),
video: {
url: './videos/3.mp4',
},
});
</script>
</div>
</div>
</div></body></html>
顶(0)
踩(0)
下一篇：没有了
- 最新评论