javascript - 对 Angular 线将视频分成一侧可见和另一侧不可见

在我的网站上，我有两个视频，但我想通过以对角线方式拆分屏幕来观看两个视频。在一侧，我们将在另一侧拥有我们的第一个视频，在第二侧。

是否可以在javascript或css3中创建类似内容？

我正在尝试这种方式，但是图像正在旋转？其他解决方案

的CSS

    .set {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
        position: relative;
    }
    section {
        position: absolute;
        top: -100%;
        height: 500vw;
        width: 500vh;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    section + section {
        background: #666;
        top: 0%;
    }
    img {
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
        object-fit: cover;
    }

的HTML

<div class="set">
    <section id="a_hov">
        <a href="">
            <img src="example1" alt="" />
        </a>
    </section>

    <section id="b_hov">
        <a href="">
            <img src="example2" alt="" />
        </a>
    </section>
</div>

Java脚本

        $(function() {
             $(window).on('resize', function() {
                     var h = $(document).height(),
                             w = $(document).width();

                    /*  Math.atan() function returns the arctangent (in radians)
                     *  of a number and 1 rad ~= 57.29577 deg
                     */
                     var angle = Math.atan(h/w) * 57.29577;
                     var rotateProperty = "rotate(" + angle + "deg)";

                     $('section').css({
                            "-webkit-transform": rotateProperty,
                            "-moz-transform": rotateProperty,
                            "transform": rotateProperty
                     });

             })
             .triggerHandler('resize');
        });

Example Image

最佳答案

您可以使用CSS clip-path属性执行此操作。

生成它的有用站点：http://bennettfeely.com/clippy/

注意：IE和Edge不支持此属性（http://caniuse.com/#feat=css-clip-path）

document.getElementById("play1").addEventListener("click",function(){
  var v = document.getElementById("vid1").play();
});

document.getElementById("play2").addEventListener("click",function(){
  document.getElementById("vid2").play();
});

document.getElementById("playBoth").addEventListener("click",function(){
  document.getElementsByTagName("video")[0].play();
  document.getElementsByTagName("video")[1].play();
});

#vid1{
  width: 300px;
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 100%);
}
#vid2{
  width: 300px;
  margin-left: -300px;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="vid1"></video><!--
--><video src="http://www.w3schools.com/html/mov_bbb.mp4" id="vid2"></video>

<button id="play1">Play Vid1</button>
<button id="play2">Play Vid2</button>
<button id="playBoth">Play Both</button>

关于javascript - 对 Angular 线将视频分成一侧可见和另一侧不可见，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38294619/