快捷搜索:   服务器  PHP  安全  IIS  linux 安全

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)

您可能还会对下面的文章感兴趣:

最新评论