OK I'm trying to develop a website that includes a youtube playlist. Later it should be possible for every person (in my local network) who visits the website to add songs to this playlist. I will use the youtube-api and probable php or python for this.
Now I've included the playlist via an <iframe> tag and stumbled across a big problem. If I now add more songs to this playlist (over youtube itself), they will of course only be added to the playlist on my website, when I reload the complete website. And if I just reload the div with the <iframe> for example, the problem is that the playlist starts all over again at the first song.
Is there a way I can dynamically update the playlist on my website? So that the playlist does not start again from the beginning, the current playing remains and new added songs are actually added "live" to the playlist?
Here the <iframe> tag if it helps:
<iframe id="playlist" src="https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
A way I suggest is:
(Before updating the div which contains the iframe), you need to get both the current playing video and the current time of the playing video.1
(Once you had added the video to the playlist and get the values I mentioned in the previous lines), update the div element (by modifying the src value of your iframe).
A example could be like this:
You have a playlist which id is: PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2.
The current playing video is: 51iquRYKPbs
When you right-click on the playing video 51iquRYKPbs you'll get the Copy URL video at current time option.
Once selected the Copy URL video at current time option, you'lll get a URL like this:
youtu.be/51iquRYKPbs?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2&t=80
Check the highlighted values - you'll need them for reload your iframe.
Your current iframe src value is as follows:
https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2
(No modifications yet).
For reload the iframe with the applied changes, set your iframe src as follows:
https://www.youtube.com/embed/51iquRYKPbs?list=PLZCHH_4VqpRhMW1K9I1hbgBRmmlWdyK3k&autoplay=1&start=80
(Once you change the src value of your iframe, it will reload with the changes made and it will continue playing the video in the specified time).
The changes made to the src value are explained next:
Set the videoId value of the video which was playing (before complete the reload).
Set the start value of the video for continue playing at the specified time.
the autoplay=1 is needed for play the video at the specified time.
1 About how get the current playing video and the current time of the playing video is a complete new question and it will depend in which language you're handling all the YouTube stuff in your website - (since you mentioned in your question that you will use php or python).
Related
I'm working on some websites that are using the WPBakery video background on rows. These should autoplay, and did until recently. Sometimes they do, and sometimes they don't. Typically it happens where they don't work more when I'm looking at them via Incognito mode on Chrome. I'm aware of the changes a couple years ago for autoplaying needing to include muted, and I've tried to hack this to add muted to the allow, but because it comes in via an iframe, it adds it too late for the autoplay to start.
Example Sites:
https://www.infrastructurereportcard.org/
https://brgcommunications.com/
https://colorworksinc.com/
I haven't seen other questions on this, but the fact that I'm seeing it on three totally different sites means that it is likely a larger issue.
Below is a bit of code that I tried, but wasn't successful in getting it to actually autoplay. It gave me an error of .play() is not a function.
<script type="text/javascript">
jQuery(function($) {
$(window).load(function(){
$('#widget2').attr('allow', 'muted accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
$('#widget2').play();
});
});
</script>
I think there's two parts of the WPBakery plugin's video background not working properly.
Video's with a Youtube-embed link are not working properly.
Video's stop autoplaying when using the same URL.
The first one is fixable by only using the URL's without embed. Something like: https://www.youtube.com/watch?v=XXXXXXXXX
The second one is fixable by creating a unique URL every time you load the page. This can be done by the following code:
function startVideo() {
const date = $('.video-wrapper').data('date');
let src = $('.video-wrapper iframe').attr('src');
src = src + '&autoplay=1&randomVar=' + date;
$('.video-wrapper iframe').attr('src', src);
}
This will take the existing url of the iframe, add the current date which is available on the wrapper and regenerate the video's url. This way the URL is always unique and will autoplay. You can also just generate a date manually and add that as a random param on the URL.
Hope this is of any help!
How to add background music when a website loads for the first time without using embed and bgsound.I am using visual studio 2010 and these two are not supported in this.
I am developing website using master page and i want to use the code in master
page.
What is the best practice to to be able when I open my website and some music starts f sometime.I am not much expert in .net with c#.So finding some problem in it.
If browser also matters?
Regards,
suparna
Add the following code anywhere in the body of your HTML document to embed a music file and play it automatically when a visitor browses your website.
<audio src="music/yoursongname.mp3" autoplay="autoplay" loop="loop"></audio>
Change the "src" attribute so that it contains the path and filename of the music file that you want to embed.
Note: Add the "loop" attribute if you want the music file to play over and over
I'm trying to embed a video on my page, depending on which one the user selects after being presented with a list.
On my page I have:
<div id="vidContent" style="text-align:left">
<object width="550px" height="350px" >
<asp:Literal ID="ltlVideo" runat="server"></asp:Literal>
</object>
</div>
And in the code behind I have:
Dim strVidPath As String = "http://www.youtube.com/v/" & strVidID
ltlVideo.Text = "<embed src='" & strVidPath & "' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' height='350' width='470'></embed>
phVideoBanner.Visible = True
..
which works ok...if the you have the "strVidID"
It only seems to display and play if you have the strVidPath = www.youtube.com/v/_O7iUiftbKU
but not play if strVidPath = www.youtube.com/watch?v=_O7iUiftbKU ....which seems to be the normal URL in the address bar when watching a youtube video.
I want the user to be able to add a video to the page and I was thinking it would be easier if the paste in the URL of the video but now it seems I'll have to get them to paste in the videoID instead as it only seems to play when I use www.youtube.com/v/_O7iUiftbKU
Anyone know why this is?
Rather than trying to parse a YouTube watch page URL and construct an embed code yourself, you can use the oEmbed service to do it for you.
If you need to get back legacy embed codes rather than iframe embed codes, you'd need to pass iframe=0 as one of the URL parameters to the oEmbed service, like: http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch%3Fv%3DbDOYN-6gdRE&format=json&iframe=0
The URL structure with the word "watch" in it is, as you point out, Youtube's public facing web page, which includes a lot more than the video ... it includes all the other content you see on the page as well. In essence, it's a pointer that resolves to an HTML page, and you can't have an HTML page as the source of an embed element.
The URL structure that is proper (i.e. the one that works) is not a pointer to an HTML page but a pointer that resolves directly to the player itself, and thus can serve as the source of an embed element.
Here's a link to a Stack Overflow question whose answer includes a C# code block that takes a regular YouTube URL (in any of its forms) as an input, does a regex match, and returns just the Youtube ID -- should be pretty simple to modify it for your needs ... thus you can still continue to have your users paste in the whole video URL:
C# regex to get video id from youtube and vimeo by url
I just installed this and it seems to work like a charm except for one thing. When the page displays, the thumbnail is blank. Is there a way I can use the first video frame as the thumbnail display or something like that?
Thanks in advance for any help you can give me.
To have mediaelement.js load a thumbnail you need to ensure that preload is not set to none. For example:
<video src="myvideo.mp4" controls="controls" preload="metadata"></video>
Setting poster="poster.jpg" as per the example in the documentation won't necessarily work (unless you happen to have a file named poster.jpg). Though you can set the poster attribute to the location of an image to use as a thumbnail prior to loading the video, in the event you don't want the user agent to peek inside the media object.
See this answer for more information on the pre-load options - What are the options for the mediaelement player's "preload" setting?
I believe you need to put a poster="poster.jpg" attribute in the <video> tag.
I'm writing a chrome extension where the standard popup page is used as a menu and I add a iframe at the bottom of the page to display some output. the display.html page contains the output I intend to display in the iframe appended to the page. This code inside my content script appends the iframe but it searches for a display.html page on the webserver rather than in the code packaged with the extension. Is there some way for me to get it to load my display.html page rather than one that may or may not be there on whichever page the extension is used on.
ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "display.html");
ifrm.style.width = "100%";
ifrm.style.height = "20%";
document.body.appendChild(ifrm);
Updated answer
Per #Cnly's comment, please use chrome.runtime.getURL to get the URL of the embedded resource. (The original answer is extremely old, predating even manifest v2).
Original answer
I think you may want chrome.extension.getURL to get the URL of the embedded resource.