javascript - How to play html 5 video on top of svg element? -


i have hexagon shape svg element image pattern inside (worker picture).

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1400" height="1550" viewbox="0 0 140 155" class="svgmember memberpicleft" id="eriksvg">   <defs>      <pattern id="svgimg" x="0" y="0" height="1" width="1">        <image x="-10" y="-40" width="120%" height="160% xlink:href="assets/img/picture.jpg"></image>      </pattern>   </defs>   <path fill="url(#svgimg)"      d="m69.999,153.831c-1.797,0-3.596-0.466-5.208-1.396l7.708,119.479c-3.222-1.861-5.208-5.3-5.208-9.021v44.542     c0-3.721,1.986-7.159,5.208-9.021l64.791,2.564c1.612-0.93,3.411-1.396,5.208-1.396c1.799,0,3.598,0.466,5.209,1.396l57.083,32.957     c3.224,1.861,5.21,5.3,5.21,9.021v65.916c0,3.721-1.986,7.159-5.21,9.021l-57.083,32.957     c73.596,153.365,71.797,153.831,69.999,153.831z"/> </svg> 

how can add video svg element, on hover video play masked element (-webkit-mask-image): contained element borders. tried add video tag:

<video id="myvideo" autoplay>    <source id="mp4_src" src="assets/video/video.mp4" type="video/mp4"> </video> 

this of course not working. didn't find solutions on google. thank help!

svg not support video element. have seen experimental builds of opera , firefox have had supported it, common browsers not.

you attach video overlay using html, css , javascript.


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -