HTML Media (Audio) player - javascript

I want to ask you how to code html audio (media) player, which is based on youtube video. So you get youtube video URL and add it to your website as audio media player (without video). Thanks. Have a nice day

A tad of Googling always helps! Useful links
Using this website yields the following code:
<div style="position:relative;width:267px;height:25px;overflow:hidden;">
<div style="position:absolute;top:-276px;left:-5px">
<iframe width="300" height="300" src="https://www.youtube.com/embed/YOUTUBE_VIDEO_ID?rel=0&autoplay=1"></iframe>
</div>
</div>
If you don't want your audio to autoplay, simple remove &autoplay=1 from the src of the iframe.

Related

Can not run video with link embed youtube

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.

How to play youtube video with default html5 controls?

I'm so sorry, but I can't get a youtube video to play (https://www.youtube.com/watch?v=SyRv0-oPfKE) inside a video tag.
I know about the iframe API but in this case it has to have the default html5 controls, not the youtube controls.
I probably missed something stupid but can't figure it out...
Anyone know how to do this?
EDIT:
so I tried:
<video
controls='controls'
src={`http://www.youtube.com/get_video_info?&video_id=${id}&asv=3&el=detailpage&hl=en_US`}
type='video/mp4'
/>
and tried:
<video
controls='controls'
src={`https://www.youtube.com/watch?v=SyRv0-oPfKE&html5=1`}
type='video/mp4'
/>
but I get blank page.
The HTML video element expects video files as a source. If you want to play a YouTube video using the native HTML video player, you'll have to provide a link to the video itself, not to the YouTube website for this video.
Also keep in mind, that not all browsers can handle any video formats. See MDN: Media formats for HTML audio and video.

How to skip iframe video to the next

<iframe width="500" height="500" src="https://www.youtube.com/embed/OWsyrnOBsJs"></iframe>
<button>Skip Video</button>
I have set up iframe to embed the youtube video. When the video is over it gives me new recommended videos I can click and play. I was wondering how can I set up my button(skip video) to skip the video and auto play the next recommend video or perhaps the next video in the playlist?
Maybe HTML5 won't be enough so I might have to use JavaScript or Dart. What is the easiest way to go about doing this?
I advise you to use the YouTube JavaScript Player API.
There are many helpful methods to play the next video etc. It is very nice documentated.
Documentation Youtube API

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

Using javascript to click an embedded youtube video

I'd like to click on an embedded youtube video using javascript (so the video plays automatically). I successfully simulated a click on a <div> like this:
function f(){
alert("hello");
}
<div id="someid" onmouseup="f();">
my text
</d>
document.getElementById("someid").onmouseup();
How can the above code be adapted to work with an embedded youtube video?
Just add &autoplay=1 to the link of the video in the <embed> tag.
If he does what you suggest the views on the embedded video won't count. I'm pretty sure he is asking his question because he is trying to find a way to get the video to autoplay and have youtube count the views at the same time.

Categories