I am building a website for a friend and he wants the Soundcloud player embedded with an image above it that changes each time a different song plays. Each track will have its own image that will show as the track is played in the Soundcloud player.
The image that is assigned to each track on Soundcloud does show in the embedded player, but only at a size of 150x150. I would like to disable this image and have a much larger image displayed above the player.
Does anybody know if this is possible and how I would go about doing such a thing. My knowledge of HTML and CSS is strong. However, other languages such as Javascript and PHP are fairly new to me, so please excuse any silly questions.
Thank you in advance!
The soundcloud widget has an show_artwork option. You could set this to false to hide the artwork in the player. Then you could retrieve the artwork in a larger format using the api (check for the artwork_url property of the track).
Related
I'm fairly new to react and my javascript knowledge is still at the beginner level. I'm building a website in react which will feature multiple audio playlists.
I'm a bit lost of where to start next. I've built the layout of the audio player which features a "content" area (which will list the trackname, artist, length in a column like a spotify playlist) and the "player controls" area (which will feature playback controls..play,pause,previous,next,volume etc.
What's the best method to link a folder of audio items (mp3,.wav) to populate the "content" area with the per item audio info (title, artist, length).
I know this would involve setting up an array or object, but I've also seen it done with json (not sure how this works)
Whatever the solution, I want this to be fairly simple to create new playlists with different content to display on different pages of the site.
I have some questions about the player controls logic as well, but I want to get the display working properly first.
I'd appreciate any info, guidance, or example code to lead me in the right direction as I'm still quite a beginner. Thank you in advance.
Cheers
I recently visited the site:
https://thechoiceisyours.whatisthematrix.com/
and selecting any of the two pills will play a video showing the new Matrix movie trailer.
Question:
What intrigued me is the time shown in the video is always the same as the viewer's time. I know the browser can access user's time but am wondering how they were able to integrate it with the playing video in realtime?
I'm trying to use Paper.js to build a tool that allows an user to select a region of interest within a video in their browser. This example reflects what I'm trying to accomplish: http://paperjs.org/examples/hit-testing/
Picture the user being able to create a blob around a portion of a youtube video to highlight a person. I then plan to use the coordinates from the points of the blob for some computer vision processing based on the interest of the user.
I think Paper.js is a great tool for this purpose, however, I'm having a hard time embedding a Youtube video inside a canvas element so that I can actually use Paper.js to build the tool. It's been surprisingly hard to find information on how I can accomplish this - this stackoverflow question provides an answer, but the youtube video must be downloaded rather than simply linked through its URL: Youtube video Inside canvas
Am I approaching this task correctly? Can anyone think of a way to accomplish this? Thanks!
I could not figure how to embed the youtube video inside the canvas, but I managed to do exactly what I wanted placing the youtube video behind the Canvas element! It turns out that a canvas is transparent, so all it took was some CSS to accomplish what I wanted. However, this disables the controls of the video, you will need to write some javascript for that to work. The following link explains how to place a video behind a canvas: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html
How could you programmatically convert a YouTube/Vimeo video into a series of animated images that each reflect 5 seconds of the video? Essentially, the goal is to deconstruct the video into silent, 5-second animated pictures -- think "moving pictures" from Harry Potter.
One option is to slice the video into 5-second video chunks, but the output should feel like animated GIFs ... that is, play instantly, be lighter than combining 150 pictures into one JavaScript slideshow (assuming 30 FPS), but have the image quality of a JPG or PNG. If this is possible with video, then it's an option we're open to exploring.
Another option is to take screen shots of the video, but that is not programmatic.
Ideas?
The output needs to get rendered in HTML5 on Mobile Safari.
You've a bit of a problem here — quality is directly related to file size. So if you create a video of 30fps (higher than regular broadcast TV, really?), you're going to run into issues with it being light & fast loading.
I don't know if I'd go down the route of making actual GIFs if you're looking for a high-ish framerate, but if it's for a web project, HTML5 video tag should be able to have autoplaying video that integrates into the page fairly seemlessly.
What you would want to do here is take a programme like Handbrake, put the video at the highest possible compression settings (lowest quality/framerate) & slowly bring it up until you have something that you think is the minimum you can get away with.
From there, you can look into scripting the process using these settings & something like FFmpeg. You'll probably also want to remove video metadata to save as much filespace as possible.
I need a way to show a YouTube video on my page. I don't need to show the link on top of the video which appears when you hover the mouse over it. I don't want the suggestions of other videos at the end of the video, I just want the replay button, but not the bunch of other related videos.
I didn't know you could do this but if you take a look at gizmodo's source you'll find a specially crafted youtube video link similar to:
http://www.youtube.com/v/0zxxM9EYQzY?hl=en&fs=1&hd=1
This style of link seems to have no top link and no video suggestions at the end. Whether you're permitted to use such links is another story.
I believe those links, buttons and garbage are how Youtube justifies putting your video out for free (It's not really free at all, is it?) If you were to figure out some way to hack into Youtube it would be stealing just the same as if you bought some app, copied it and handed it to your customers.
If you want a service that can publish your video without their own terms then I suggest you plan to pay for the bandwidth, at that point you will find many companies willing to "Help" you do it exactly the way you want.
I'm not 100% sure, but the little guy has no choice but to suffer the burden of promoting youtube with all of the extra crud. If Gizmodo - as you mention - don't have such faecal adornments, then that's because they're a "big guy," drawing significant viewers from views directly in youtube which probably offsets the loss in exposure through embedded videos.
TL;DR - if you have a lot of viewers, this is probably a feature you get/earn for free (removing adornments in embedded view)