To watch videos in an HTML5 web player requires us to add the source of the video in the HTML code like this:
<video id="example" class="video" controls preload="none" width="500" height="300"
poster="abc.jpg" data-setup="{}">
<source src="../87D645D1d01.ogv" type='video/ogg' />
</video>
So is there any way with which we can browse a media file in our local file system irrespective of the OS and then add the pah to the SRC: part of video element like we do it in any desktop based video players and then play it?
Regards.
Anuj.
Related
I use html5 to play video like this.
<video oncontextmenu="return false;" id="videoElementID" width="320" height="240" controls>
<source src="Welcome.mp4" type="video/mp4">
<track src="Welcome.vtt" kind="subtitles" srclang="en" label="English">
</video>
It can protect right click to download but it can download in source code like this.
In udemy it have no video in code like this. How to protect download video in source code to download.
You can't. Because, If somebody is watching your video — he already has it.
I saw a question like mine on this page: How to play video from google drive using javascript?
However, I have a question. For some reason, this answer from that question:
Google provides some GET-params like export and id with google-drive:
?export=download&id=YOUR_LONG_VIDEO_ID
to give you the ability to insert an uploaded video into a HTML5-video-tag.
This should work:
$("#play").click(function() {
$("#video")[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="play" style="margin-top: 300px;">Play</button>
<video id="video" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=0B8-qLYDzDfCyRF9vOE9sWmx5YjA" type='video/mp4'>
Your browser does not support the video tag.
</video>
Works well when I test it out on the w3schools tryit:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide
I switched that code for my code, I just use it as my practice area.
But when I place my own video in with the same formula, just switching the original google drive video with my own, my video controls are greyed out and clearly can not play the video. My original video is uploaded on my google photos, put in a named folder on my google drive, where both folder and video are open to anyone with the link access.
I don't understand why the original video works fine, and mine doesn't. It's frustrating because I know using this way of putting a google drive video into the video tag allows me to use my custom controls to control the video. But something is going on with my video for some reason.
Here is my code with the original one, you'll see it's the same.
$("#play").click(function() {
$("#video")[0].play();
});
$("#play2").click(function() {
$("#video2")[0].play();
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="play" style="margin-top: 300px;">Play</button>
<video id="video" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=0B8-qLYDzDfCyRF9vOE9sWmx5YjA" type='video/mp4'>
Your browser does not support the video tag.
</video>
<br>
<br>
<button id="play2" style="margin-top: 300px;">Play</button>
<video id="video2" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=1hLjl0TDEOnPrgXhFxAVNL5fM_qLtCgB9lA" type='video/mp4'>
Your browser does not support the video tag.
</video>
Lots of help will be GREAT!!!!!!!!
According to me, there is permission problem with your drive video.Because I have tried to hit on your link I am getting error of permission. But previous drive's video((working fine)) easily accessible.
Go to your video in Google Drive.
Right-click and select get shareable links, then change your sharing setting to 'On - Public on the Web'.
Refer Image for sharing setting
I don't understand, I have a project with Angular2 and in my home component, I try to display a video with html5. The problem is that sometimes, on some videos, the tag doesn't play sound:
<div class="video-gallery">
<video id="video" controls preload="auto" width="640" height="420" poster="assets/imgs/video_logo.png" >
<source src="assets/videos/{{videos[0].name + videos[0].extension}}" type="video/mp4" />
</video>
</div>
When I say 'on some videos' I mean it's not up to the extension, some videos are mp4 and play sound and others (mp4) don't. Same thing for mkv for example. I only get the video but no sound. What could be the problem ? I work with Chrome's last version so I don't think it's from chrome because it is supposed to support video and sound of html5 . Can it be from the video tag ?
Thanks
I want to play a video after another video so I use this code
<video id="example_video_1" autoplay controls="none" width="640" height="300" poster="vlcsnap-2015-01-10-20h41m11s114.png" onended="run()">
<source src="intro.mp4" type='video/mp4' />
<source src="intro.webm" type='video/webm' />
<source src="intro.ogv" type='video/ogg' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
<script>
videoPlayer = document.getElementById("example_video_1");
function run(){
var nextVideo = "video2.mp4";
videoPlayer.src = nextVideo;
videoPlayer.play=autoplay;
videoPlayer.controls=controls;
};
</script>
This works fine in chrome but when i play this in firefox the 2nd video (video2.mp4) dose not play, as firefox dose not support mp4 format. So is there any process to set the second video in mp4, webm and ogg file format so that most of browsers can play the video.
Your last source <source src="intro.ogv" type='video/ogg' /> Is wrong. You wrote two different formats .ogg is for audio. And you need to establish a folder name that the file is in. With this you need to have the HTML5/CSS3 file right next to the folder in a separate folder. This is the correct code:
<source src="foldername/intro.ogv" type='video/ogv' />
Other than that your code is in great shape.
***I do not know anything about your script because I know nothing about JavaScript, or JQuery. Hopefully this was useful! Sorry :(
I'm looking for a way so a certain embed link from youtube/video/other video provider that doesn't have an API can be wrapped around a HTML5 <video> tag. And if I'm then able to use the HTML5 features of this tag? I'm looking for something like this:
<video width="560" height="315" controls autoplay>
<iframe width="560" height="315" src="http://www.youtube.com/embed/5qm8PH4xAss" frameborder="0" allowfullscreen></iframe>
</video>
or this:
<video width="640" height="505" controls autoplay>
<object width="640" height="505" type="application/x-shockwave-flash" data="http://www.youtube.com/v/YE7VzlLtp-4">
<param name="movie" value="http://www.youtube.com/v/YE7VzlLtp-4" />
</object>
</video>
I'm actually looking to generalise the video providers embedded video options, I would like to be able to call play(), stop(), ... from javascript without limiting to only video providers that have specified an API. I'm basicly looking for something like this: http://www.w3.org/2010/05/video/mediaevents.html
What you're asking for is not possible unless what you're describing is a direct link to a video file, and even then that's probably not enough, and I'll explain why:
Firstly, the HTML5 <video> element is designed to work with videos, not Flash objects. Secondly, different browsers only support certain video formats:
FireFox: OGV, WebM
Internet Explorer: MP4
Safari/iOS: MP4
Chrome: MP4, WebM
So unless you have video sources to an MP4 version of the video AND an OGG version of the video, it won't work in all modern browsers. E.g.:
<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- Fallback code (e.g. Images, Flash, text, etc.) -->
</video>