Diagonal ein Video auf einer Seite sichtbar und andere unsichtbar

Question

In meiner Website habe ich zwei Videos, aber ich möchte beide sehen, indem Sie den Bildschirm auf eine diagonale Art und Weise aufteilen. Auf der einen Seite haben wir unser erstes Video auf der anderen Seite, auf der anderen Seite.

Ist es möglich, etwas ähnliches in Javascript oder CSS3 zu erstellen?

Ich versuche auf diese Weise, aber das Bild dreht sich? andere Lösung

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

Sie können dies mit CSS clip-path Eigenschaft tun.

Nützliche Website zur Erzeugung es: http://bennettfeely.com/clippy/

Hinweis: IE und Edge keine Unterstützung für dieses Objekt (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(); \t \t 
 
    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>