个人中心
gpt4 book ai didi

javascript - 边到边 html5 视频

转载 作者：行者123 更新时间：2023-11-30 18:42:46 25 4
gpt4 key购买 nike

我在我的页面上运行一个 HTML5 视频，我想让它根据浏览器的大小按比例调整边到边的大小。它将被设置为页面上很少的背景。

为了掩盖我的屁股，我正在使用 VideoJS 来播放视频并处理向后兼容性。库中内置的全屏功能运行良好，但会触发浏览器的 native 全屏功能。在某些浏览器中，这意味着黑条，在 Safari 中，它意味着独立于浏览器窗口的全屏显示。这两个我都不想要。

http://videojs.com/

理想情况下，它的功能类似于 Supersized 对图像的作用。图像始终设置为页面的整个宽度，高度从那里向中心裁剪。当您将页面的大小调整得越来越小时，它会达到最小高度并开始向中心裁剪宽度。

http://lara.fm/

我的 JavaScript 知识很少，但我能够通过戳戳和戳戳来解决问题。我认为在 VideoJS 库之后放入 Supersized 大小调整脚本并强制它们在 video 标签上工作会以某种方式起作用..至少是一个起点，但它没有起作用。

谁能帮我了解一下什么函数可以调整页面宽度、高度比例以及在一定宽度或高度处向中心裁剪？到目前为止，这是我得到的:

http://kzmnt.com/test/

这是一个tuffie，我知道。非常感谢。

最佳答案

您可以尝试以下操作，(基于您发布的演示)

.video-js-box.fullScreen{
    width: 100% !important;
    position: relative;
    background: black;
}
.fullScreen .video-js{
    height: 100% !important;
    margin: 0 auto;
    display: block;
}

在 video-js-box 添加 .fullScreen 类，看看会发生什么。

我正在努力实现您上面描述的效果，一旦找到更好的解决方案，我会尽快通知您。

编辑:好的，我想我找到了一个解决方案——(版本 2)

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8" /> 
  <title>HTML5 Video Player</title> 

  <!-- Include the VideoJS Library --> 
  <script src="http://kzmnt.com/test/video.js" type="text/javascript" charset="utf-8"></script> 

  <script type="text/javascript"> 
    VideoJS.setupAllWhenReady();
  </script> 

  <!-- Include the VideoJS Stylesheet --> 
  <link rel="stylesheet" href="http://videojs.com/video-js/video-js.css?v=1292015834" type="text/css" media="screen" title="Video JS"> 
  <style>
  body{margin:0;}
.video-js-box.fullScreen{
    width: 100% !important;
    min-width: 380px !important;
    min-height: 280px !important;
    position: relative;
    background: #eeeeee;
    position:absolute;
    overflow: hidden;
    top:0;
    left:0;
    height:100% !important;
    z-index:998;
}
.fullScreen .video-js{

    height:auto;
    /*height: 100% !important;
    width:100% !important;*/
    width:100%;
    top:0;
    left:0;
    margin: 0 auto;
    display: block;
}

.video-js-box{
    width:400px;
    height:auto;
}
.video-js-box video{
    width:400px;
    height:auto;
} 

#buttonImportant{
    position:fixed;
    top:0;
    right:0;
    width:100px;
    height:100px;
    border-radius:8px;
    background:#eeeeee;
    font-size:1.3em;
    z-index:999;
}
  </style>
</head> 
<body> 

 <div id="buttonImportant"> CLICK ME!!!  </div>



  <div class="video-js-box" id="videoContainer"> 
    <video class="video-js" preload loop fullscreen autoplay> 

      <source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
      <source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.webm" type='video/webm; codecs="vp8, vorbis"' /> 
      <source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
      <object id="flash_fallback_1" class="vjs-flash-fallback" width="1280" height="720" type="application/x-shockwave-flash" 
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" 
          value='config={"playlist":["http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.png", {"url": "../vid/kozmonaut_by_christina_tan.mp4","autoPlay":true,"autoBuffering":true}]}' /> 
      </object> 
    </video> 
  </div> 


 <script type="text/javascript">

var clicked =  document.getElementById("buttonImportant")

var videoContainer = document.getElementById('videoContainer');
var video = videoContainer.getElementsByTagName('video')[0];

video.style.height="auto";
video.style.width="400px";

clicked.addEventListener('click',function(){
    if( videoContainer.className.lastIndexOf("fullScreen")>=0 ){
        videoContainer.className="video-js-box";
        video.style.height = "";
        video.style.width="";
    }
    else
    {
        videoContainer.className="video-js-box fullScreen";
        video.style.height = "";
        video.style.width="";
    }
    myResizerObject.prevWidth = video.offsetWidth;
    myResizerObject.prevHeight = video.offsetHeight;



    myResizerObject.Init();
},false);

    var RESIZER = function(){ 

        this.prevWidth = video.offsetWidth;
        this.prevHeight = video.offsetHeight;

        this.videoContainer = document.getElementById('videoContainer');
        this.video = videoContainer.getElementsByTagName('video')[0];
        this.videoStyle = this.video.style;

        var ratio = this.video.offsetHeight/this.video.offsetWidth;

        var that = this;

        this.Init = function(){
            if( that.videoContainer.className.lastIndexOf("fullScreen")>=0 )
            {
                var videoContOffsetWidth = that.videoContainer.offsetWidth;
                var videoOffsetWidth = that.video.offsetWidth;
                var videoContOffsetHeight = that.videoContainer.offsetHeight;
                var videoOffsetHeight = that.video.offsetHeight;

                if(that.prevWidth!= videoContOffsetWidth)
                {
                    that.prevWidth = videoContOffsetWidth;
                    var desired = videoContainer.offsetHeight/videoContainer.offsetWidth;
                    if(desired>ratio){
                        that.videoStyle.width=videoContOffsetWidth*desired+videoContOffsetWidth*desired+"px";
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                    }
                    else{ 
                     that.videoStyle.cssText="height:auto;width:100%;left:0px;top:0px;";
                    }
                }

                if(that.prevHeight!=videoContOffsetHeight)
                { 
                    that.prevHeight = videoContOffsetHeight;
                    var desired = videoContOffsetHeight/videoContOffsetWidth;  
                    if(desired>ratio){  console.log(ratio);
                        that.videoStyle.top = '0px';
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                        that.videoStyle.width = videoContOffsetHeight*desired+videoContOffsetHeight/desired+'px';
                    }
                    else
                    {
                        that.videoStyle.top = -1*(videoOffsetHeight-videoContOffsetHeight)/2+'px';

                    }
                }

            }
        };
    };

    var myResizerObject = new RESIZER();
    window.onresize = myResizerObject.Init;

 </script>

 </body> 
</html>

复制 - 将上面的代码粘贴到一个新文件中并测试它:)

主要编辑 2:我重构了我的代码，并将其打包为更加面向对象的形式。现在它确实移动了(修改了 top 和 left css 属性)，以便在屏幕比例发生变化时视频保持居中。它仍然有一个奇怪的小跳跃，但效果很好。我将继续完成这项任务，因为我认为这是一个很酷的功能。我也不知道在闪存回退期间会发生什么或您想发生什么。

附言。我保留了点击我按钮，但很容易禁用它。

关于javascript - 边到边 html5 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6379544/

25 4 0
文章推荐： c - NSight VS Edition - 它包含在 CUDA 5.0 工具包中吗？如何使用它？
文章推荐： javascript - Twitter API 从中获取一条推文并在代码中使用它
文章推荐： javascript - 使用 Javascript 正则表达式获取元元素属性
文章推荐： javascript - 图像放大脚本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com