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.
Related
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>
Would like to have an MP3 track play in the background immediately after a HTML/CSS/JavaScript page is loaded.
So far, only able to have a player with controls at the bottom of the page:
Bottom of webpage
using the following code:
<audio id="bg_music" class="audio" controls loop>
<source src="audio/silent-night.mp3"
type="audio/mp3">
Your browser does not support the audio element.
</audio>
Would like to find a way to have the MP3 file play automatically after the browser (Chrome) loads the webpage.
Thanks,
Benjamin
You need to add an attributed autoplay, and it will be done. You may additionaly provide value autoplay=true or autoplay=false, but still if you don't give it, it will automatically consider it to be true if you just add the attribute.
<audio id="bg_music" class="audio" autoplay controls loop>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
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.
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
I am trying to put a video into my website using html5.
The sound of the video plays, however you can just see a black space.
I have used the basic <video>from w3schools. My code looks like this...
<video width="420" height="315" controls>
<source src="myMovie.mp4" type="video/mp4">
<source src="myMovie.ogg" type="video/ogg">
</video>
sounds like it can be your graphic card, have you googled black screen on html5 video? You might wanna add you graphic card and ios to your search.
Unless you use browser that doesnt support html5. If that's the case, get a html5 browser and try it out :)