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.
Related
In React I am getting the source file dynamically through an api call.
<audio src={rec.data2} type="audio/mp3" controls autoplay />
It is not displaying the usual play button with volume control, instead it just displays the link. What am I doing wrong?
try this:
<audio controls>
<source src={rec.data2} type="audio/mpeg">
</audio>
w3Schools explain it :
Definition and Usage The tag is used to embed sound content in
a document, such as music or other audio streams.
The tag contains one or more tags with different
audio sources. The browser will choose the first source it supports.
The text between the and tags will only be displayed
in browsers that do not support the element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
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.
I can run video with link embed youtube.
My code:
<video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
poster='' data-setup='{}'>
<source src='https://www.youtube.com/embed/fZ-yXDJJj5g'>
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
Video is show loading but don't play.
Please help me
As stated on the official repo, video.js doesn't support youtube video out of the box, you need to use a plugin for that:
It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins)
So you'll have to use a plugin for that, like for example this one.
HTML5's video tag only works with video files. It doesn't work with Youtube video links(As those links do not point to source of video, instead they are a pointer to an HTML page). For that either you have to find storage link of video, which is not a good practice. Because Youtube can change that anytime. Better to use iframe for displaying Youtube video on your website.
You could just use tag then pass the src of the video. or even embed just like this.
<iframe id='my-video' class='video-js' width="640" height="264" src="https://www.youtube.com/embed/fZ-yXDJJj5g">
</iframe>
or
<embed id='my-video' class='video-js' width="640" height="264"
src="https://www.youtube.com/v/tgbNymZ7vqY">
then target those id to perform whatever you wanted to do.
I've encountered this problem, video tag does not work on this scenario.
So, I've research you can use iframe tag or embed then play with it into the script.
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 :)
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>