У меня есть шестиугольная форма svg Элемент с изображением в виде рисунка внутри (рабочий рисунок).Как играть в html 5 видео поверх элемента svg?
<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>
Как я могу добавить видео к элементу SVG, так что при наведении курсора видео будет играть в масках с элементом (-webkit-маска-образ): , содержащиеся в элементе границы. я попытался просто добавить тег видео:
<video id="myVideo" autoplay>
<source id="mp4_src" src="assets/video/video.mp4" type="video/mp4">
</video>
Это, конечно, не работает. Не нашли решения для Google. Благодарим за помощь!
Довольно уверен, что Firefox никогда не поддерживал видео. Я попытался интегрировать его в одно время, но он превратился в гнездо крыс изменений кода. –
См. Firefox: https://hacks.mozilla.org/2009/06/tristan-washing-machine/ – user3072843
Это элемент видео html, а не элемент видео SVG. Firefox уже много лет поддерживает это и продолжает делать это, экспериментальная сборка не требуется. –