How to create card with video without opening that video separately?

Hello, everyone =)

I want to create flash card with a video fragment in such a way that the video is located under the text and does not open separately through the mpv player, as shown in the picture below:

I’d like to do something similar to this:

20210712_052347

But unfortunately this is a GIF picture and it is without sound.

So, my weird, rephrased question:
How can I add a video fragment (mp4, avi) into flash-card so that it sits in a row and opens where it is (not in a new window…created by mpv player)?

Hope I made clear explanation. :thinking: Sorry if not. :frowning_face:

Oh great commune members please come down to assistance me. :cloud_with_rain: :cloud_with_rain: :cloud_with_rain:

Or if my question is foolish maybe someone can give me a link where I can find the solution.

Thanks a lot! :blush:

I don’t think this can be done using the default video player (mpv).

You may have luck using the HTML video tag instead of Anki’s [sound:filename] tag (this is not officially supported and doesn’t support as many formats as mpv AFAIK):

<video controls>
    <source src="video.webm" type="video/webm">
</video>

Change the filename in src= and the type in type= accordingly.

Reference: <video>: The Video Embed element - HTML: HyperText Markup Language | MDN

2 Likes

Thank You for answering :slightly_smiling_face:

I don’t know anything about coding :frowning:
I understand a little bit about HTML and CSS (how tags, properties work in browser) but that’s about it!

Before I show you my ridiculous efforts…should probably say that I have folder on my homescreen called “mp4” with my video fragments for further flash-cards:

01

Here is what I did:

  1. I added code right inside the back of the card (without indicating address of the video fragment):

video didn’t appear

  1. I added code right inside the back of the card (indicated address of the video fragment):

Maybe I entered the address of the video fragment incorrectly, but video didn’t appear again

  1. I even used ready-made template from developer.mozilla.org:

I hope this should look like this (in my case):

but video didn’t appear again

  1. I added code in that way also:

Finally, video icon is appeared in appropriate place but it doesn’t work (it’s just empty). I think this is about the address which is incorrectly specified. But I really don’t understand how to solve this silly problem.

adbo can you explain me please how to do this step-by-step?

You should open the HTML editor from Edit HTML and paste the code there:

Also, the video file should be in your collection media folder for it to work (the media folder is usually C:\Users\%USERNAME%\AppData\Roaming\Anki2\User1\collection.media).

1 Like

Awesome thanks :slightly_smiling_face:

I made this :slight_smile:

01. FIRST
I have added my “01.mp4” video file to the following address (like you said)
C:\Users\Guru\AppData\Roaming\Anki2\ContextReverso\collection.media

THE FIRST PROBLEM I faced is that my Anki only shows video fragments in webm format (I don’t know why). Such formats as mp4, avi, wav did not open. Instead, there was just an empty video icon. So I converted my video fragment into webm.

But also I learned from one article on the internet that if I want my cards work in AnkiDriod it’s necessary to add mp4 format as a second format. So I added two <.source.> tags (one with webm and other with mp4) and of course converted and paste the same video files into collection.media folder

02. SECOND
I added the code using Ctrl+Shift+X (like you said)

Here’s the result:

20210713_025553

On PC it works well!
But…
THE SECOND PROBLEM is that AnkiDroid does not show video files at all. But why? Android should support mp4 format, shouldn’t it? At least that’s what it says in an article on the forum.

I extracted my deck with media files and download it on smartphone.

After importing the deck into AnkiDroid, there was completely empty collection.media folder.

Of course, the video will not work if the video files themselves are not present! But where did they go?

I ran synchronization but it also didn’t help.

Not sure what format would work on both desktop and Android. I also tested with the ogg format and it only seems to work on desktop.

Hey ,
i am also trying to setup the video player as you said in this post.
the thing is i can easily attach the video file using “paperclip icon” ,
the video opens perfectly when i click the answer card , the problem is , it covers all my screen (almost in fullscreen window size).
i tried following your steps but i dont really understand the ‘coding’ part.
and you made some additional changes too (i am fine with the .mp4 file format ) i dont have anyother problems so i dont know which changes to copy from your post.
Please help me if you can. (i also posted this on fourm Video player window size problem (mpv player) )