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

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>

Related

How can i overlay audio with video?

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.

HTML5 video player ,How to control on progress bar?

I search for solution in many questions but I didn't get answer, I have HTML5 video play :
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="{{asset('promos/'.$course->id.'.mp4')}}" type="video/mp4">
<source src="{{asset('promos/'.$course->id.'.m4v')}}" type="video/ogg">
</video>
it works fine but I cant control in progress bar ,I can't move video forward or backward ,How can I do that ?
is anyone can help ?
Video Link
https://streamable.com/k3rved
You HTML5 looks fine - the video below will allow moving forwards and backwards using the scroll bar as a working example to refer to:
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
If the issue is the lack of thumbnails when you hover over the progress bar, then these need to be generated separately on the server side and included in the video container (e.g. mp4) that you make available.
Update
The video link in the question above is not actually a link to a video, rather it is a link to a webpage.
This webpage does indeed contain a video, along with the videoJS player, when you inspect it, but you can't use the webpage link as the 'src' attribute in a HTML5 video.
Assuming you have permission to use the video, you can extract the src from the video at that webpage. This works in this case, at the time of writing anyway - sometimes videos in a webpage will have access restrictions or authentication requirements to prevent them being accessed from other sites.

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.

Showing HTML5 Video Controls but not allowing user to change anything?

Is it possible to show the user an HTML5 Video player's controls but not allowing them to change anything, like seeking any part of the video, changing volume, etc?
An easy way would be to just absolutely position a transparent element above the video.
You could also create custom video controls which only show the timeline for example but allow no interaction.
Native HTML5 <video> element does not allow this behavior. But, as Andy said, you are free to provide your own controls and make them read-only.
Take a look at MediaElementJS, a javascript library that wraps around HTML5 video and provide skinable controls. You could for example extract the source code of the progress bar, and modify it to remove the click handler.
There are many ways of doing it.
First way is to use video{pointer-events:none;},in which user cannot click or use default control bar.But here user also cannot play/pause the video.So,you have to add play/pause button(as I added in snippet).
Second way is here.But you have to add progress bar and timings.(progressbar)
and
Third way is to use library or frameworks which are comfortable to do this.
For eg. Use Youtube to embed videos without controles.This can be the best way but your video should be on Youtube.If not,upload it..:)
var vid = document.getElementById("vid");
function play() {
if (vid.paused)
vid.play();
else
vid.pause();
}
video{pointer-events:none;}
<div>
<video id="vid" width="320" height="240" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<br>
<button onclick="play()">Play/Pause</button>

How to get a thumbnail from an embedded video?

I am trying to embed a video into a webpage using lightbox. From a design perspective, how should I place the video on the page.
I mean the videos are lined up across the page as thumbnails. Should I take a frame from the video and display that as an image that the user clicks? Or does the various video plugins take care of creating the thumbnail for you?
If you're using HTML5, the thumbnail of a video is defined using the 'poster' attribute in the video tag. Here's an example:
<video width="500" height="375" poster="myThumbnail.jpg" preload="none" controls="controls">
<source src="http://hostname.com/myVideo.webm"/>
</video>
If you want to create this image automatically using a given frame of the video, you should check the link posted by F. Calderan

Categories