javascript - 对 Angular 线分割视频，一侧可见，另一侧不可见

Question

在我的网站上，我有两个视频，但我想通过对 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>

Javascript

        $(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

Answer 1

您可以使用 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>