Tips for displaying HTML 5 video over an SVG element

I am currently working on a hexagon-shaped svg element that features an image as a pattern inside (depicting a worker).

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

I am looking for a way to incorporate a video into the svg element so that it plays when hovered over, masked with the element (-webkit-mask-image): sitting within the boundaries of the element. I initially attempted to add a video tag:

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

However, this method is not functioning properly and my searches online have not yielded any solutions. Any assistance would be greatly appreciated!

javascripthtmlcsssvghtml5-video

Answer №1

According to current standards, SVG does not include the capability to integrate videos within its elements. While there have been instances of experimental versions in browsers like Opera and Firefox that support this feature, it is not widely accepted in mainstream browsers.

If you wish to add a video as an overlay on your SVG content, you can achieve this by utilizing a combination of HTML, CSS, and Javascript techniques.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The commands 'npm run watch' and 'dev' are no longer functioning on my computer for my Laravel project. I am encountering an error stating: '[webpack-cli] RangeError: Maximum call stack size exceeded'

Recently, while working on a Laravel website, I've been focusing on writing JavaScript code to integrate Meilisearch. To facilitate this process, I incorporated the 'dotenv' library with node to access variables from my .env file for securit ...

javascriptnode.jslaravelnpmdotenv

Ways to insert JSON information into a designated index within a different JSON file with the help of AngularJS

Here is the response in json format retrieved from the API: { "columnHeaders": [ { "columnName": "id", "columnType": "bigint", "columnLength": 0, "columnDisplayType": "INTEGER", "isCo ...

javascriptjsonangularjs

I'm interested in querying my mongodb collection data based on a particular field

I need help creating a list from my mongodb database that can be sorted by the "username" field. After learning about the limitations of namespaceing in mongodb, I'm trying to figure out how to sort my collection based on the "username" field. Here ...

javascriptreactjsmongodbmongoosenext.js

Creating a dynamic event set feature with a Collada object in A-Frame for immersive webVR experiences

I've been experimenting with creating a rotating animation on a collada object using the event set component plugin for A-frame. While I've had success with a-box, I'm running into some issues when trying to animate the collada object instea ...

javascripthtmlaframewebvr

Error encountered when attempting to load Angular controller file during server-side operations with Node.js

After writing the controller code in the same HTML file, everything seemed to work fine. However, when I decided to move the controller code to a separate JavaScript file (myController.js) and referenced the file in the src attribute, I encountered an erro ...

javascriptangularjsnode.jsexpress

Tips for utilizing regex to locate words and spaces within a text?

I'm feeling so frustrated and lost right now. Any help you can offer would be greatly appreciated. I am currently dealing with an issue in Katex and Guppy keyboard. My goal is to create a regex that will identify the word matrix, locate the slash that ...

javascriptregextypescriptkatex

Is it feasible to simultaneously activate a modal and launch a URL in a separate tab when a link is selected?

I have 4 buttons, stylized to look like actual buttons, but only two of them are relevant: The first button opens a link in a new tab with its respective URL and the attribute target="_blank". The second button triggers a modal window containing text ...

javascriptjqueryhtmlbootstrap-4

Dragging the mouse outside of an element after clicking inside

I've come across a common issue, but unfortunately haven't been able to find a solution yet. window.onload = function (e) { var foo = document.getElementById('foo'); foo.addEventListener('click', function(e) { ...

javascripthtmldrag-and-droponclick

What is the best way to retrieve the value of an UL LI element using jQuery

I'm struggling to retrieve the value of a ul li listbox in a function, and I can't seem to figure out how. Here is my code: <ul class="dropdown-menu" id="newloc"> <?php $res_add = DB::table('res_br')-& ...

javascriptphpjquery

What is the best way to trigger the selection options in a dropdown menu with several buttons?

Is it possible to display the options from a select-option tag using a different button? I have either a div or another button. I want to be able to show the list of options from my select tag by clicking this button. Here is my select tag: <select&g ...

javascripthtml

What is the best way to verify a single input text box for various values?

I have a vision of creating a platform where individuals can verify their prize bond numbers. Armed with some knowledge in PHP, I decided to kickstart the process by developing an HTML form: <form> Enter your prize bond number <input type="te ...

phphtmlformscsvrange

What is the proper method for utilizing the "oneOf" keyword in this schema?

Is it possible to have either option A or B, but not both (mutually exclusive)? In Draft 3, I am required to use whatever is available, even though the version on top says 4. This is because when using an array for "required", it throws an error stating t ...

javascriptjsonjson.netschemajsonschema

I am having trouble aligning these elements next to each other

Can anyone help me figure out why these elements won't center on the page? <ul id="contact"> <h1> Contact </h1> <p> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2e6d0c7c3cfd1d6cdd5cac7c7ced1 ...

htmlcss

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

javascriptjquerycssajaxhtml

How can a tab be created using a link within a tab using jquery easyui?

Tabs documentation My goal is to add a new tab from a link within an existing tab. For instance, in tab A, there should be a link "open tab B" that when clicked, adds tab B. I have attempted to create a tab with a link outside of the tab (which works). ...

javascriptjqueryjquery-easyui

Troubleshooting: Inconsistencies with saving input values to a variable in jQuery

I am encountering an issue where I cannot save the input data in a variable. When I do, it saves as a blank space or as 0 if it's an integer. Below is my code snippet: function attachKeyupEventDescuento(inputElement, i) { var cantidad = $(&apos ...

javascriptjquery

What is the best way to incorporate facial features into an indexed THREE.BufferGeometry?

If I have created a THREE.BufferGeometry from a THREE.Geometry called oldGeom like this: // using WebGLRenderer var geometry = new THREE.BufferGeometry(); var indices = new Uint16Array(oldGeom.vertices.length); var vertices = new Float32Array(oldGeom.vert ...

javascriptthree.js

Sort through a collection of objects using various criteria

The information is structured as follows: export const data = [ { id: 1, company: "Photosnap", logo: "./images/photosnap.svg", new: true, featured: true, position: "Senior Frontend Developer", ...

javascriptreactjsarraysfilter

What makes the element[class=noquotes] function so effective?

According to the MDN attribute selector in CSS, it has the following syntax: div[attr="actualValue"] For example: <div class="test"></div> div[class="test"] However, I have observed that the quotes around the test are not necessary as show ...

htmlcssw3c

Guide to implementing 301 redirection from HTTP to HTTPS in Next.js

What is the process for implementing a 301 redirection from HTTP to HTTPS in Next.js? One example of this would be redirecting from "http://stackoverflow.com/" to "https://stackoverflow.com/". ...

javascriptnode.jsnext.js