视频背景的banner

最新推荐文章于 2021-06-25 20:46:38 发布

yqwwj001

最新推荐文章于 2021-06-25 20:46:38 发布

阅读量353

点赞数 1

本文链接：https://blog.csdn.net/yqwwj001/article/details/103202052

版权

这个需求真的是让我很无语，不过好在是搞定了，下面直接放代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频播放</title>
<style>

</style>
</head>

<body>
<div id="video-container" style="width:100%;">
     <video autoplay="" muted="" loop="" style="width: 100%;">
           <source src="此处放视频地址" type="video/mp4">
                您的浏览器不支持视频播放，请更换其他浏览器。
     </video>
     <div id="overlay">
     <h3 class="hjh3" style="color: #fff; text-align: center;left:50%;top:2rem;margin-left:-50%; width: 100%; margin-top: -0.03rem; position: absolute;"><span class="en" style="color: #fff; width:50%; display: block; margin: 0 auto;font-size:0.1rem;">坑爹需求</span><span class="cn" style="color: #fff;font-size:0.1rem;">放什么视频啊放</span></h3>
      </div>
</div>
</body>
</html>
<script type="text/javascript" src="https://www.monitaedu.com/statics/js/x5/jaliswall.js"></script>
<script type="text/javascript">
    $(function(){
        $('.wall').jaliswall({ item: '.article' });
    });
        
        
        
        // shipinJS
var video = document.querySelector('video')
  , container = document.querySelector('#video-container');
 
var setVideoDimensions = function () {
  // Video's intrinsic dimensions
  var w = video.videoWidth
    , h = video.videoHeight;
   
  // Intrinsic Ratio
  // Will be more than 1 if W > H and less if W < H
  var videoRatio = (w / h).toFixed(2);
   
  // Get the container's computed styles
  //
  // Also calculate the min dimensions required (this will be
  // the container dimentions)
  var containerStyles = window.getComputedStyle(container)
    , minW = parseInt( containerStyles.getPropertyValue('width') )
    , minH = parseInt( containerStyles.getPropertyValue('height') );
   
  // What's the min:intrinsic dimensions
  //
  // The idea is to get which of the container dimension
  // has a higher value when compared with the equivalents
  // of the video. Imagine a 1200x700 container and
  // 1000x500 video. Then in order to find the right balance
  // and do minimum scaling, we have to find the dimension
  // with higher ratio.
  //
  // Ex: 1200/1000 = 1.2 and 700/500 = 1.4 - So it is best to
  // scale 500 to 700 and then calculate what should be the
  // right width. If we scale 1000 to 1200 then the height
  // will become 600 proportionately.
  var widthRatio = minW / w
    , heightRatio = minH / h;
   
  // Whichever ratio is more, the scaling
  // has to be done over that dimension
  if (widthRatio > heightRatio) {
    var newWidth = minW;
    var newHeight = Math.ceil( newWidth / videoRatio );
  }
  else {
    var newHeight = minH;
    var newWidth = Math.ceil( newHeight * videoRatio );
  }
   
  video.style.width = newWidth + 'px';
  video.style.height = newHeight + 'px';
};
 
video.addEventListener('loadedmetadata', setVideoDimensions, false);
window.addEventListener('resize', setVideoDimensions, false);
</script>

yqwwj001

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
视频背景的banner

这个需求真的是让我很无语，不过好在是搞定了，下面直接放代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/x...
复制链接

扫一扫