How can i overlay audio with video? - javascript

So i wanted to overlay 2 files so they played together using html video controls , this is because the file it too large to fit in one whole bit . I wanted to add two videos , one with audio but a black screen and one with video but no audio and overlay.
I tried
<!DOCTYPE html>
<html>
<body>
<h1>The video element</h1>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
but it doesn't actually play them together on further testing.
does anyone know how i could link them together so that when it pause both of the files pause, unpause and can be skipped to a certain timestamp. I am unsure if this is accomplish and if it is possible using java-script, can you please show me how!

Adding several audio and video elements to the same page is no problem and controlling them with one set of controls again achievable, so this could mean when the user pressed play they would all trigger to start play.
However, even if the play button for all is pressed at the exact same time they would not be in sync, elements would ultimately start at slightly different times (buffer, pre-loads etc) and I think it would be this part that would make the idea of overlaying video with audio and playing them in sync a non starter from the outset.

Related

Restart video on hover of another element using embed HTML (in Webflow)?

I am using Webflow and have been struggling with writing basic code within an embed HTML editor to control a video.
I am trying to start a video class="video" each time I hover on a button class="btn" sitting inside another container class="videoContainer" which sits in under the same parent. All via html embed only, mind you.
How would I reference that class and hover action inside the video embed code editor? I think I'm struggling with the proper syntax here.
Essentially I want the video embed to know when I hover over the button so that I can restart the video from 0:00 each time a hover happens
<video width="100%"
preload="preload"
class="ignore-observer"
loop="loop" muted="muted"
autoplay="autoplay"
playsinline="playsinline">
<source src="videoURL" type="video/mp4">
</video>

How to make HTML audio tag work in Opera?

i'm trying to add autoplay audio in my html page and i already tried embed and audio with and without controls and optional attributes, and absolute path. Tried different formats, though i know that Opera supports .ogg. My last try is here:
<audio controls id="music1">
<source src="./models/laughing.ogg" type="audio/ogg"/>
</audio>
html page and audio file are located like this:
if i press play button audio is played, but when i start my entire project the button is covered (as should be). And anyway i want it to be autoplay so
My Opera is the last version, Windows
Autoplay doesn't typically work. You need some sort of user interaction, like a click.
There is nothing you can really do about this. It's a browser "feature" to prevent ads from playing audio in the background.
<audio controls autoplay>
Try adding "autoplay" inside the voice tag.

Forward and Backward functionality not works for long video in Video tag of html 5

I am using Html video tag. I have added video URL from azure blob. When I click on play then it starts playing but when I want to make forward and backward to video, it is not going on that position where I want to start play. It is still on that current position. So I want to show loading when I click on forward when video is not ready to play same as YouTube. Here is my code:
<video id="video" class="family-post-img" controls="controls"
<source src="#Model.FileURL" type="video/mp4">
</video>
I want to show video buffering as YouTube when I directly click on forward and backward if video is not ready to play.
Thanks
When a user seeks through a video two events fire...
onseeking triggers while they are seeking
onseeked triggers when they are finished seeking.
Therefore, you need to monitor these events and take appropriate action, like this...
<video src="movie.mp4" type="video/mp4" onseeking="CallAction1();" onseeked="CallAction2();" controls></video>

Disable the HTML5 information from YouTube Embedded Video [duplicate]

I have a small project of doing some html5 videos embed on a site.
I use a simple HTML video embed code
<video width="560" height="340" controls>
<source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
so my question is that possible to disable the copy URL when you right click on the video?
I know if they really want to get the video link there are ways to do so.
but just at least if I can do that one.
Thanks
You can catch right-clicks via JavaScript and thus prevent the right-click menu.
As you correctly noted though, it’s only a hindrance rather than prevention. HTML5 video is about direct integration into the browser and thus can also be saved like images, for example.

HTML5 video tag in IE plays 2 tracks simultaneously instead of one

I have this page
http://joewillhelpyou.com
Users click the blue botton and a video page begins to play.
I have it simple. an iframe so the Jquery dows not mess with my tag that I found would not allow me to autoplay the next video, and 2 src for each video. In all the browswers they work okay, only one video is played back mp4 or webm. but in IE I keep hearing two playing back and I cannot figure out why
you can visit the page and tell me if you catch my mistake or a workaround for IE
<div id="videodiv">
<iframe src="http://joewillhelpyou.com/videos/step2/play02_01.html" width="1000" height="750"></iframe>
</div>
then this leads to a page where I have the video
<video controls autoplay width="936" height="624">
<source src="002_001.mp4" type="video/mp4">
<source src="002_001.webm" type="video/webm">
Your browser does not support the video tag.
</video>
under normal situations the code only plays one choce right? but in IE it seems to play 2 things at once, the rest of the browsers only sound out one track and that is what I want

Categories