I'm developing a site in which i will show youtube videos to the user,
Steps:
1)i'll upload video urls to Database (manually i'll enter url into database.)
2)using that url i want to show a default image in my site
3)if user clicks on that url video will play.
is it possible to do this without youtube api ?
YouTube video has 4 images by default provided by youtube
http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg
Display those images and when user clicks on it show the video
w3schools have a tutorial section on how to do this with basic HTML; javascript isn't required:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
http://www.w3schools.com/html/html_videos.asp
Related
I am using html video player. I want to show control bar always ..currently it shows on hover but i want it should be display always not only on hover.
Include the controls attribute to the video player
<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>
For me adding the control tag always shows the controls in Chrome. Are you using other browser like Safari?
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I am trying to use a video with sound in the video tag but the sound is not playing when I run it in browser ,if I remove the muted attribute video doesn't play .The video directly works in browser if you open the link.Please help
<div class="background-wrap">
<video preload="auto" autoplay="true" loop="loop" muted>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type="video/mp4"> </video>
</div>
Is it possible play video from remote download video link.
For example I have link http://vidrack-media.s3.amazonaws.com/student_47e96b83-989e-437a-8953-0d068308e25f.mp4
I wanna render any video player where I can watch this video.
Yes you can, in nearly every player.
<video width="320" height="240" controls>
<source src="http://vidrack-media.s3.amazonaws.com/student_47e96b83-989e-437a-8953-0d068308e25f.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
These are my code snippets which I've tried but I just get an error message that I need a Plugin
<embed src="eria.mp4" height="50%" width="100%" controls>
You don't need any plugin in HTML5. But the syntax is a bit different:
<video width="100%" height="50%" controls>
<source src="eria.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The <embed> tag defines a container for an external application or interactive content (a plug-in).Simple words it requires a plugin to run external application which is missing from your browser.
Use HTML5 video tag instead
<video height="50%" width="100%" controls>
<source src="eria.mp4" type="video/mp4">
<source src="eria.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I tried the following HTML for displaying a video. But I am not able to see video.
Its only loading the video, but not playing it. I'm using 'video.js' a JavaScript and CSS library which manipulates the video tag for a consistent UI.
If I am missing something please tell me.
Here is my code:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}" >
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>
I have included above code in body tag and also included references to video.js and video.css in the head tag.
I don't know what browser you are testing with, perhaps it doesn't support the html5 video tag, but regarding your comment, I don't think so :)
However, you have neither set the controls attribute to make the control panel appear so user can manually start (and control) the video, nor set the autoplay attribute so that the video will play as soon as it is ready, so I suggest adding these attributes:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
autoplay="autoplay" controls="controls"
data-setup="{}">
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>