I want my youtube playlist or playlists to play randomly songs. Optimally, i want a buttom that can refresh the page, so a new song will come on.
I have tried alot and could only find something that playing 1 certain video.
Is it possible to shuffle a playlist from the start?
In theory, each video in the playlist is assigned an index value. There is a difference between shuffling and refreshing the page. You can make a shuffle button that acts as a boolean, if it's on then the NEXT song (index number) will be randomly generated from the playlist, excluding the current songs index value.
Your question is very detailed and not language specific so I can't really help you further but that is my take on the logic behind what you need to do. Happy to help but best I can do is take a reasonable guess.
Edit*: Sorry, didn't see your Javascript tag, unfortunately I don't know Javascript.
Related
I have an HTML list of music tracks in a website. Some of them can be previewed with an audio sample.
I want to implement a triangle (play button) in front of each of those tracks, so that the visitor can click on each of those and hear a short audio sample. If the visitor clicks on another track before the previous is done, the latter should stop and the new one should play.
Is this simple plan implementable without much effort? I am good at HTML and CSS, but i can't write JavaScript. I've researched the audio-controls attribute, but it gives me a complete player with a bunch of controls that i don't want displayed.
Are there any tutorials you guys could point me to, if this is only possible with java-script?
Wow, no answer for weeks...
But i found a solution myself. Everything that i described works with a small jQuery player i found here: https://github.com/kuantal/Multiple-circular-player . I can have multiple instances and the script is "intelligent" enough to let only one single instance play at the same time.
Props to the author of the script - well done!
I'm building a web app using ReactJS that will allow employees to view various video training sessions and then answer quiz questions about them. I would like to use HTML5 video elements to maximize compatibility across devices, but users can always just scrub through the video to get to the end and trigger the next operation in the app. It is necessary for them to watch the entire video before moving on.
I need a way to tell if the whole video has been played before allowing the user to move on. I was looking at the Video JS Advanced Examples page, and I found exactly what I was looking for. They have a 'played' data field that updates with what time ranges the user has played through. The problem is that I have no idea of how to implement that feature in my app. I can include and get VideoJS up and running just fine, but I don't know how to access the 'played' property of the video player.
If anyone could give me a direction to go in, I would really appreciate it. If this is a stupid question, I'm really sorry. I'm still fairly new to all of this. Thank you so much.
Cheers,
Jaydon
played comes form the html5 media spec. It returns a TimeRanges object.
Video.js provides most of the functionality of the native video element via methods. So, the played property on the video element (as vidEl.played) becomes a method call on the Video.js's player object (as player.played()).
The API to time ranges is a bit weird. But essentially, it has a three properties: length, start, and end.
This is what they do:
* length: how many ranges are there? In the case of played, how many different sections of the video have been played?
* start(): a method that tells you the start time of a given range
* end(): a method that tells you the end time of a given range
It's likely that you will only have one range, but it's possible you'll have more. So, you'll want to loop over the length of the ranges. To know exactly how much the user as played, you'll basically want to loop over each range and calculate it's duration (end(i) - start(i) and then compare it to the duration of the video (player.duration()). If they are close, that means that the user has watched the entire video.
This may well be a long-shot (I suspect some of the feature requests in the project I'm working on might be 'bordering on' pedantic) but is there a simple way - that doesn't involve designing a javascript video player - to lower the amount of time the html5 video player progress bar takes to disappear, once the mouse stops moving?
Yes, you read me right.
I guess what I'm hoping for is, say, an html attribute in the video tag that can be set to a certain amount of milliseconds, or something... I haven't been able to find anything, so I'm guessing the answer is 'no'.
Actually I'm hoping the answer is a straight 'no', but unfortunately I have to ask.
Any help, either way, much appreciated.
Thanks.
I'd like to chose a specific time that the tag uses (instead of the first frame - which is always black in my case) for the "preview".
I've currently made thousands of "poster" files, but this is clunky and inflexible.
Is this possible?
What you want to do is use an image (screenshot) from the video to be set as the placeholder. The advantage of this is loading time, its much faster to load a little .PNG file instead of preloading the video to show that frame.
This appears to have been discussed before:
Previous Thread
That link may not be specific enough, you want to use the "poster" attribute in the "video" tag.
<video poster="image.png">
<source src="video.mp4" />
</video>
There is no immediate way to accomplish what you want.
If you do not specify a poster as per specification the browser should display the first frame of the video upon first presentation of the video tag.
When the video element is paused, the current playback position is the first frame of video, and the element's show poster flag is set
The video element represents its poster frame, if any, or else the first frame of the video.
You could think about capturing a specific frame through a canvas element. This question can give you some hints on how to do that.
If you want a full-fledged thumbnail selection process, you will need to use a software like ffmpeg (server side) to generate thumbnails at different timestamps of the video and allow for a user to select one (or generate one at a given timestamp). This can help you.
Also keep in mind that a good poster can generate more views for your video (people tend to click/touch more video element with attractive posters). So spending some time on generating good posters is usually time well spent.
As it turns out, I can do this with:
video.currentTime = 10
where 10 is the seconds into the video that I want to show. Only tested in Chrome....
I understand, I know its a pain to create the "posters" but I think in the end its the most efficient way to achieve the effect...
I'm trying to figure out what would be the best way to record a blackboard type of application in the webbrowser. Where a tutor can record a video of the blackboard with audio.
I think the obvious answer here is to make a html5 canvas and capture it at intervals as images and combine these to a video. Like so
However this has several disadvantages. It is not easy to edit the video later on. Also videos would require a lot of storage space.
What are your ideas? How can I construct this recording and playback of a blackboard?
/Jake
I am currently working on a project that records HTML5 canvas drawings and allows you to play them back later. There are no images, everything is stored in the Javascript/JSON. There is no audio, so I plan on adding a transcript feature along with it. If you want to follow along with my project, it is at http://github.com/eipark. The code is still very much raw and buggy, but I am actively developing it for a school project and hope to have at least the "video" recording portion done in the next week.