如何在svg元素上播放html 5視頻？

我有一個六角形形狀svg元素與內部圖像（工作人員圖片）的圖像。如何在svg元素上播放html 5視頻？

<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上找不到任何解決方案。謝謝你的幫助！

來源

2015-06-19 KasparTr

SVG不支持視頻元素。我已經看到一些支持它的Opera和Firefox的實驗版本，但常見的瀏覽器不支持。

您可以使用HTML，CSS和Javascript將視頻作爲疊加層附加。

來源

2015-06-19 14:44:24 user3072843

很確定沒有Firefox構建曾經支持視頻。我一次嘗試整合它，但它變成了一個代碼變化的老鼠巢。 –

查看Firefox：https：//hacks.mozilla.org/2009/06/tristan-washing-machine/ – user3072843

這是一個html視頻元素，不是SVG視頻元素。 Firefox已經支持了這麼多年，並繼續這樣做，不需要實驗性構建。 –

如何在svg元素上播放html 5視頻？

回答

相關問題