Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
A client just asked for a book-reading website with the following settings:
Must have a nav-bar with a menu and a background-music on/off button.
The menu are links to different content.
The content must change as users desire.
Here comes the tricky part:
If the background music it's ON, then the audio must play along even if the content changes (the only way I know to change the content is refreshing the URL but this also cuts the audio)
Is there a way to achieve this effect? with JavaScript or Jquery?
I really appreciate your help. If you post a simple JSFiddle I would be very pleased.
You will need to make a Single Page Application (SPA). This means you will have one .html file and use AJAX to load the contents of different pages into that file instead of having multiple .html files and reloading the browser. If you reload, the Audio WILL stop.
Here's what you need to do:
Learn the HTML5 Audio API. In other words, learn var audio = new Audio(src), audio.play(), audio.pause(), etc.
Learn how to make AJAX calls (a framework can help you make the AJAX calls. Easiest choice is jQuery)
Here's a demo app on Plunker: https://plnkr.co/edit/1Z1bdXXLcLn2h4TfkOQA?p=preview
Press the play button and change pages. Notice how the music continues to play while the pages changes.
Also, your server will need to be configured to send you the contents of the pages via AJAX so you can avoid having separate .html files for different pages and refreshing.
This is what Soundcloud uses for continuous playback. They use backbone.js, but any decent framework will do.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 12 months ago.
Improve this question
Hi
So, while making a website I noticed that when I am redirecting between sections in HTML using 'a' tag I am getting the link as 'www.example.com#section'.'
This is the code:
Change Section
<section class="section">
<p> Hi </p>
</section>
I want the link as 'www.example.com/section'
I wanna know how to do this change.
This is just how URLs work.
https:// determines how to ask for the resource
www.example.com determines what server to ask for it from
/some/path/?query=optional determines what to ask the server for
#fragment is handled client-side and determines where the browser scrolls to on the page
There isn't a sensible way to make the part of the URL that is sent to the server be treated as the part the browser uses to determine where to scroll to.
If you want to head down routes that are not sensible…
Make the server-side code deliver the same HTML document for every /path you want to represent a part of the same page
Mark the primary URL as canonical
Add some client-side JS that:
waits for the DOMContentLoaded event
Reads the location to get the path
Uses some internal logic to determine what element to scroll to
Uses scrollTo to scroll to it/Element/scrollTo
Add some more client-side JS that:
Listens for click events on your internal links
uses pushState and preventDefault to change the URL without leaving the current (identical) page
Reads the URL from the href of the clicked link
Does the same as steps 3.3 and 3.4
Add some more client-side JS that
listens for popstate events
gets the URL the user is going back to
Does the same as steps 3.3 and 3.4
… now that's a lot of work to make URLs act in a non-standard way.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I want a YouTube player that just has play, pause, and close as options. Maybe full screen would be fine. No recommended videos, more videos, etc.
I want to share YouTube videos through Google Classroom. I don't want them to be able to click any link that re-directs them back to the YouTube watch page.
Google Classroom only allows you to search for videos using its interface OR provide a watch link / url. I'm trying to use a workaround using an embed code on a Google Site. If it's easy enough to do I might try to teach teachers how to create their own links. Or maybe I can make a custom embed code generator that I can share with them.
I've looked at YouTube embed API code, but cannot get anything to work. I assume it's just my small amount of knowledge about how to code it.
I know I want controls=0 modestbranding=1 and showinfo=0 at the least
I expected this to strip out the navigation bar, YouTube watermark, and Video Title. It didn't do any of them. When I remove all but one of the variables it does that variable. Again, apologies about my lack of understanding on the topic.
It's not going to be possible to make it that minimalist. All of the options for embedding videos are listed here:
https://developers.google.com/youtube/player_parameters
You could use an online tool like this to customize everything that's available with an easier to use UI:
https://www.classynemesis.com/projects/ytembed/
It's not going to be possible to remove the watermark or redirects to Youtube.
All options for the iFrame API are here.
I'm sorry to say, but I don't think you are able to do so without breaking the YouTube Terms of Service. Removing their watermark sounds especially problematic.
General Use of the Service—Permissions and Restrictions
A. You agree not to distribute in any medium any part of the Service or the Content without YouTube's prior written authorization, unless YouTube makes available the means for such distribution through functionality offered by the Service (such as the Embeddable Player).
B. You agree not to alter or modify any part of the Service.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm not sure if my question was clear or not (since I'm new to web development) but what I'm trying to say is:
I have this HTML line,
<embed src="Music/Disfigure%20-%20Blank.mp3" autostart="true" loop="true"
width="2" height="0">
When I view my website, the music starts playing as it should, but when I switch to another page, it starts from the beginning again. How can I keep it from restarting when I switch to a different page?
It is possible but its a little more complex than you might think. In order for the music to continuously play, the site needs to be setup in a manner where navigation causes the same page to update rather than loading a new page. One way to do this is with AJAX.
You can read more about AJAX here: https://www.w3schools.com/xml/ajax_intro.asp
AJAX is a developer's dream, because you can:
Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background
The basic theory is that you simply grab the content from the new page, and replace the content on the current page. This way the user never actually leaves the page so the music that is playing will continue to play. The reason it restarts when going to a new page is because the browser is having to reload everything when you change pages.
Barba.js is a great way to get up and running fast with AJAX. You can also add in great animations with it as well.
http://barbajs.org/
This wouldn't be possible with just HTML. However if you structure the page such that sections are loaded dynamically using javascript via ajax or a library like: SPFjs. Then you could have the music playing on the base page and change the content around that. This way the part of the page playing the music is never unloaded.
The only reason this isn't possible is going to a different page completely unloads the previous so the music would also be unloaded.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am working on a web application, where am uploading pdfs, ppts and videos(.mp4) to my location on the server and just displaying the links to them.
And when the user clicks on these links it should be opened in a new tab and make them not downloadable too.
So below are the things which am stuck with:
The pdf's link do open in a new tab , but I still can download them.
On clicking the PPT file link it directly downloads to my local drive, instead i want to make it open in a new tab and also it shouldn't be downloadable.
Same goes for the videos as well, I want to make them not downloadable and just open in an other tab.
Please help me with this, if there is any solution to it.
You can't reliably stop someone downloading a file if you are making it available to view on the browser - one way or the other, the file has to make it to the browser and there are many techniques to capture and store the file.
If the content security important to you then the usual approach is to encrypt the files so they are no use even if they are downloaded and use a DRM system to share the key between the server and the browsers. There are free 'clearkey' DRM schemes which include the key in the file, and hence are not as secure, but which may be good enough for your requirements.
If you are concerned about the information being very sensitive, rather than avoiding people creating high quality copies, then ultimately there is nothing to stop someone simply recording the screen with an external camera.
use target_blank to open files in new tab
Open pdf
Open ppt
Open Video
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
My company is looking to create a page for an accreditation document which is several hundred pages long. There are about five sections, each with roughly 40-70 pages.
What do you think is the best way to handle navigation and display for this? Currently the only thing I've got in my mind is a simple nav window on the left that directs to iframes of each section's PDF and lets Adobe's table of contents manage navigation from there.
OR I could make each section in the nav a drop-down and each subsection a separate PDF (to reduce load times), but that feels clunky.
Large PDFs are nice as there is less page jumping, but they have awful load times. Small PDFs are nice for the fast load times, but awful with jumping around.
Any ideas would be appreciated. I'm left scratching my head on this one.
We've server-side pdf-to-png converters for that.
The webpage is loading page by page as png-image via AJAX while scrolling.
Works like a charm.
On the PDF side, make sure that your document is optimized for fast web view. This would transfer the first page plus all the overhead, and then only transfer the pages which are requested.
Conditions for that is that the server supports byteserving (something any kind of new webserver should be able to do), and that the PDF viewer component used to display the PDF understands about byteserving (the Acrobat/Reader component does, for example).
For the navigation, you could use bookmarks, which you make displaying in the document options of the document. With a good set of bookmarks, navigation through the document becomes rather easy.
It is big PDF. Navigation is fine but you want that user should not download the pdf and each time they have to read from site. Second case is when many users are not interested complete the PDF file, They may download/read particular section.
As per my view you should break PDF in smaller section and sections should managed by navigation links.