I have a web site with a media player for audio built in. Currently when I visit another page in my website the media player resets for obvious reasons (because the entire page gets loaded).
Is there any way to keep the current song that is playing in the audio player, playing while the user clicks through to a new page? The audio player is simply inside a div and when the user wants to play a new song the javascript just changes the audio objects src atribute.
You should use an iframe and keep the audio player outside of it, so the user does not navigate the entire page but only in the iframe
Basic example:
<div id="audioplayer"></div>
<iframe src="index.html"></iframe>
Related
I am creating a website that alerts when certain events happen with an audible alert. Since the arrival of chrome 66 it is not possible to play audio without the user making a gesture. For me this is a big problem, I was searching but I did not find any solid solution.
For example Youtube. When entering a link in the browser, the video starts automatically, without any user gesture. How do they do it?
It also occurred to me to ask for permission for the browser to allow automatic audio playback. Something like: "Notification.requestPermission ()". But I couldn't find how
When you navigate to a YouTube video link within YouTube itself, it doesn't actually navigate to a new page. YouTube uses a library called Structured Page Fragments (SPF) to render only relevant parts that need to be changed. Because of this, the browser doesn't consider this as a newly navigated page, and allows YouTube to automatically play videos with audio.
For example, from the Homepage, when you click a video in the Subscription box, this counts as a user interaction. The page then loads the fragments required to watch the video using SPF and - because the user is in the same navigation context as far as the browser is concerned - plays the video automatically with audio.
However, if you load the same video in a new navigation context (such as using a link from an external site, or opening it directly in a new tab) users will still need to interact with the page - in this case by clicking the video - to get audio. Once this is done, because the user has now interacted with the page and other videos are dynamically loaded using SPF, further interaction is not required for other videos to play automatically with audio in that navigation context.
Note that you don't need to specifically use SPF to achieve this effect. You can use libraries such as Angular and Vue to change views with a click event, and these should still count as the user having interacted with the page.
I have a website where they want to add a video, but first we want the video to load and then the website is displayed.
I already have the video uploaded.
I just want the video to be shown first and then the web content
<center><video id="myVideo" src="http://as2.asset.aparat.com/aparat-video/325cc0361862066dc06e8fb1fc7ec8a77684093-240p__39060.mp4" autoplay style="border-radius:5px;width:100%;"></video></center>
I have the idea that JS can be used, to run when the document loads, but I don't know how to implement it
This question is slightly different from:
https://stackoverflow.com/questions/15034835/can-i-hide-a-embeded-youtube-video-or-is-that-against-the-terms-of-use
When a user visits our website, the YouTube player is visible and in the right size. A user can play the video and see the whole video. Nothing fancy. However we want to put the player in a tabbed interface. Meaning that the user can hide the video by going to another tab. For example:
Video | Info | Share
When the site loads the Video tab is active, but users can click "Info", then the video is hidden while the video keeps playing in the background.
Is this allowed? I would say gray area but I'm not sure. We always show the YouTube logo and link to the YouTube video on youtube.com btw. Also, if a users scrolls down on youtube.com, the user also hides the video and can still hear the audio. Is this perhaps the same area?
This is in their terms of services so i would say it is not allowed
8.separate, isolate, or modify the audio or video components of any YouTube audiovisual content made available through the YouTube API;
9.promote separately the audio or video components of any YouTube audiovisual content made available through the YouTube API;
14.use a video player smaller than the minimum video player size set forth in the YouTube API documentation and specifications.
https://developers.google.com/youtube/terms?hl=it
Situation: I have a page that shows a stream of posts (news) submitted by our members. I have a setInterval() in this page that causes it to refresh every x seconds - if user is idle for x seconds.
Recently I have added video posts where user can click on an item and video would begin to play immediately in the page (so far I'm only using youtube iframes).
The problem: my auto refresh sometimes refreshes the news content while user is watching a video and being "idle"... which causes video to close and content to reset...etc. Meaning, user will loose his/her position in the video and have to start over.
My question: how do I detect if this page has at least one video that is currently "playing"? I'd like to use this to decide if auto refresh should occur or not.
Note: I'm not currently in favor of using the custom player or google/youtube js api because soon I will be adding support for videos from other services such as vimeo, 56.com...etc.
Question rephrased: is there a "universal" javascript or jquery method to detect if a video is currently playing in the document or window?
Thank you!
A bit of background first. I have made a player based on soundManager2, in the HTML file of the player there is a link to the soundManager2 js file, a js file which creates my interface, and a php file which generates js code to create the playlist.
The reason the playlist is in an external file is so while the music is playing a user can add tracks to it. Then on the final track the player will reload itself using window.location.reload(); in order to recheck the external playlist to see if any tracks have been added, if they have it continues on and plays those, if not it loops back to the beginning.
I just tried to embed the music player into the web page it has been created for using the jQuery below:
$("body").ready(function(){
$("div").load("music_player.html", function() {
button_up();//Loads the first track of the playlist
});
});
As you may have guessed my problem is that window.location.reload(); reloads the whole page and not just the player in the div. So what I need to know is, is there a way to just reload the content of the div which I can call from the music players js file. Alternatively, is there a way to tell the music player to recheck the playlist file each time a track is finished (soundManager allows you to call functions at the end of a sound), and this would probably be the better solution.
Yes just use AJAX, and all your problems with the full page reload will disappear.