自适应视频播放-html代码-BFW代码库

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>  Responsive video - JavaScript module</title>

<style>
  .video-container {
  max-width: 1200px;
  margin: 0 auto;
}
.video-container video {
  width: 100%;
}

.tip {
  max-width: 1200px;
  margin: 40px auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: arial;
  font-weight: bold;
}
.tip svg {
  margin-right: 10px;
}

.social {
  position: fixed;
  bottom: 20px;
  right: 0;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0 26px;
}
.social li {
  display: inline-block;
  margin: 12px;
}
.social a, .social svg {
  display: block;
}
.social a {
  position: relative;
  height: 40px;
  width: 40px;
}
.social svg {
  height: 100%;
  width: 100%;
}
.social .icon {
  color: #444757;
  fill: #444757;
}
.social .icon:hover {
  border-radius: 100%;
  color: #5f637a;
  fill: #5f637a;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: background-color 0.5s,  -webkit-transform 0.5s ease-out;
  transition: background-color 0.5s,  -webkit-transform 0.5s ease-out;
  transition: background-color 0.5s,  transform 0.5s ease-out;
  transition: background-color 0.5s,  transform 0.5s ease-out,  -webkit-transform 0.5s ease-out;
}
</style>

</head>
<body translate="no">
<div class="tip">
<svg height="40" viewBox="0 0 64 64" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m61 11h-58a1 1 0 0 0 -1 1v9h60v-9a1 1 0 0 0 -1-1zm-54 7a2 2 0 1 1 2-2 2.006 2.006 0 0 1 -2 2zm7 0a2 2 0 1 1 2-2 2.006 2.006 0 0 1 -2 2zm7 0a2 2 0 1 1 2-2 2.006 2.006 0 0 1 -2 2z" fill="#57a4ff" /><g fill="#004fac"><path d="m61 10h-58a2.006 2.006 0 0 0 -2 2v40a2.006 2.006 0 0 0 2 2h58a2.006 2.006 0 0 0 2-2v-40a2.006 2.006 0 0 0 -2-2zm-58 2h58v8h-58zm58 40h-58v-30h58z" /><path d="m7 13a3 3 0 1 0 3 3 3.009 3.009 0 0 0 -3-3zm0 4a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z" /><path d="m14 13a3 3 0 1 0 3 3 3.009 3.009 0 0 0 -3-3zm0 4a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z" /><path d="m21 13a3 3 0 1 0 3 3 3.009 3.009 0 0 0 -3-3zm0 4a1 1 0 1 1 1-1 1 1 0 0 1 -1 1z" /><path d="m46 50h8a1 1 0 0 0 0-2h-8a1 1 0 0 0 0 2z" /><path d="m57 50h1a1 1 0 0 0 0-2h-1a1 1 0 0 0 0 2z" /><path d="m45 25v10a1 1 0 0 1 -2 0v-7.59l-20.59 20.59h7.59a1 1 0 0 1 0 2h-10a1 1 0 0 1 -.38-.08.956.956 0 0 1 -.54-.54 1 1 0 0 1 -.08-.38v-10a1 1 0 0 1 2 0v7.59l20.59-20.59h-7.59a1 1 0 0 1 0-2h10a1 1 0 0 1 .38.08.956.956 0 0 1 .54.54 1 1 0 0 1 .08.38z" /></g></svg>
<p>改变窗体大小会播放不同视频</p>
</div>
<div class="video-container">
<video autoplay muted playsinline loop class="responsive-video" data-video-src-sm="http://repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" data-video-src-md="http://repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4" data-video-src-lg="http://repo.bfw.wiki/bfwrepo/video/5d87680ae1bf6.mp4">
</video>
</div>


<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>


var app = {
  debounce: function (func, wait = 100) {
    let timeout;
    return function (...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        func.apply(this, args);
      }, wait);
    };
  } };


app.responsiveVideo = {
  responsiveVideos: null,

  breakpoints: {
    tablet: 768,
    desktop: 1024 },


  init: function () {
    var self = this;

    // Set local elements
    self.responsiveVideos = $('.responsive-video');

    if (self.responsiveVideos.length) {
      self.responsiveVideos.each(function (index, responsiveVideo) {
        self.handleVideoSource(responsiveVideo);
      });

      self.handleResize();
    }
  },

  handleVideoSource: function (responsiveVideo) {
    var self = this;

    var video = $(responsiveVideo);

    // Initialise the first load to set video.data('isMobile')/isTablet/isDesktop values
    //
    if (!video.data('data-init')) {

      // If tablet or less
      if ($(window).width() <= self.breakpoints.tab.........完整代码请登录后点击上方下载按钮下载查看

自适应视频播放

网友评论0

css的margin-block与margin-trim布局切换示例代码

css布局实现胡桃夹子效果代码

css+div布局绘制光芒四射的可爱太阳代码

单个div+css布局实现圣诞雪花球水晶球雪景球效果代码

div+css布局实现一个立体开始按钮效果代码

单个div+css布局实现蛋糕蜡烛效果代码

单个div+css布局实现礼盒效果代码

div+css布局实现城堡建筑效果代码

div+css布局实现圣诞节装饰图案灯笼效果代码

div+css布局实现立体键盘效果代码