For people that have experience with the Youtube Javascript API, I was wondering would it be possible to create a completely customized audio player using the API. My objective is to simply use the API to play sound from a embed youtube video, pause, change volume, from javascript buttons, without ever displaying the flash object itself. Does the API allow this?
Yes. Take a look at this: http://code.google.com/apis/youtube/js_example_1.html
You'll see that you can have full range of control. If you do not want to display the flash object, set the width and height equal to zero.
Related
I have 4 versions of a video and they're hosted on the server like this:
/1920x1080.mp4
/1280x720.mp4
/640x480.mp4
/426x240.mp4
The videos are using the HTTP 206 partial content for streaming.
I want to make so that you can change the video quality from a small menu bellow like on youtube or twitch without the player having to reload or change the video source.
Is this possible with HTML5 video if it is how?
Also please answer if there are other ways to achieve this.
I want to make so that you can change the video quality from a small
menu bellow like on youtube or twitch without the player having to
reload or change the video source. Is this possible with HTML5 video
if it is how?
Yes, Its is possible with mp4, but extremely complex, and beyond the scope of what I can explain here, especially if the keyframes are not aligned.
So how does YouTube ad twitch do it? They dont use mp4s. The use segmented streaming protocols such as DASH or HLS, then use a player that supports changing resolution like hls.js or video.js.
On this page I enter the data for the "home loan simulation". and a "video" is generated in response to the data that I entered, it is something like a dynamic "video".
This "video" shows related data that I entered.
I inspect the code and I don't see anything that shows a video tag or something. This looks like video, from the control bar, to the full screen option, and the cc. It also has audio, although the voice of the "video" does not mention any dynamic data.
I inspect the code and I don't see anything that shows a video tag or something.
This looks like video, from the control bar, to the full screen option, and the cc. It also has audio, although the voice of the "video" does not mention any dynamic data.
Does anyone know how this was done or has an example of how to do it? is there any way to do the same using javascript, css, and html?
thank you
this is the link
https://www.grupobancolombia.com/personas/creditos/vivienda/simulador-credito-vivienda##sim-results
The video from your question is actually a very big SVG as #Kaiido mentioned.
The animation script is very hard to understand. Here is just a part of it:
You can see it has more that 320.000 lines of code. And we have no clue what all this numbers mean. Of course, some of them are time codes, some are coordinates, but we need reverse engineering to understand.
Your original question: is there any way to do the same using javascript, css, and html? of course has the answer: yes. Almost any animation is possible.
But we need examples. Ok, there are two possible ways to solve the animation: use existing library or create your own. If you are interested in your own, just ask in comments.
Use library
Google suggest: animate.js library.
Here is an example of using controls (play/pause/resume/reset/set time) as it is in real video player: click.
Here are 3 examples of using SVG: move along the path, morph to other shape, change line properties.
More examples using animate.js are here.
Write your own library
I use some kind of self-written library in one of my projects. The idea is:
have an array of keyframes - this is where animation changes. Each keyframe has: time start, duration (similar to having "time end"), the list of changes (objects or their properties).
I update the animation in requestAnimationFrame() loop (because my animation goes only to the future, I do not have controls)
when current time becomes greater than new keyframe start time, I drop (remove) previous keyframe from array and apply new objects/values
if current time is greater than keyframe start, but less than keyframe end, I use lerp (linear interpolation) to calculate in-between values of objects
But this description is just for the idea, so that you can create something that suits your needs.
Audio
I think, audio is just a normal audio tag in HTML:
<audio id="a">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
It can be controlled with methods and properties: look here. Example:
const a = document.getElementById('a');
a.currentTime = 0.8; // playing at 0.8 seconds from the start
a.play();
From what i can understand, they are using an API provided by a company. What they are doing its basically taking your inputs, process them and send a bunch of info to the API as a POST request, then the API responds with a custom URL that they show to you with an iframe.
If you wanna learn more you should check the company that provides the API. IndiVideo
Also, i don't think that this is the right place to ask for something like this.
It appears to be an SVG video that takes in your data and renders it out in real time. It's definitely something anyone can build, but it would take a little less effort if you used an API.
I am building a small app that allows to add css3 filters like grayscale in a video and download it. The video won't be longer than 6 seconds. So, I am first loading the video in the canvas and then applying the filter that user demands. Now I want user to be able to download the filtered video. The canvas.toDataURL() is only meant for images. Is there any high level canvas api to achieve this?
Thank you
Not that I know of. I think this is something that should be done server-side. Either send the raw video to the server and tell it what filters were applied so you can re-create the effect on the server OR use the solution proposed here capturing html5 canvas output as video or swf or png sequence? (hint: it's also server side)
I have a rather unusual question for you all; it might be foolish but I am new to this area and I would really appreciate some help.
As the title suggests I was wondering if there is a way to disable a specific button from the default browser controls for the HTML5 video.
I know that each browser has its own somewhat unique looking set of controls so I don't think that I can overlay the button with CSS.
If it is impossible is it maybe possible to somehow tie via Javascript the event of the video going full screen to another event?
I was looking into making the custom controls or using the pre-made players but if at all possible I would like to get away without using either.
I appreciate any help.
You can't hide specific native controls. You can either use them or hide them via the controls attribute.
As far as using listening to fullscreen events along with other events the video API provides, longtail does extensive research on compatibilities or lack thereof within different browsers and devices.
You can make your own css controls on top of the video element and control different actions via the html5 media api demonstrated here.
For fullscreen type things, I'd recommend looking through the code here as it was written for the Vimeo HTML5 player specifically.
It's kind of a nightmare dealing with the Video API depending how much support you're trying to achieve.
I found this link to a page here on StackOverflow about "Creating Audio using Javascript in <audio>", and this page on how to play audio on multiple channels. I found that the iPhone supports the audio tag and the Audio object in Javascript to play single channel audio, but is there a way to play audio on multiple channels?
Maybe I'm over complicating this, so this is what I'm trying to do. I want a way to make a graceful audio player in Javascript that supports transitioning from one audio file to another. The way I was going to implement this is to incrementally reduce the volume on one channel while incrementally increasing the volume on the other channel so I'd get a kind of fade effect. Is there a simpler solution to this using only Javascript? I guess another solution would be to reduce the volume to a certain point, start the new audio file on the same channel, then increase the volume again. This circumvents the need for fading, but I would like to fade if at all possible.
Is this possible? I know the HTML5 spec isn't finished yet, but is there some kind of workaround that you know of? Do any of you have ideas for another approach?
From what I can tell from this post about playing audio in the Android browser, this isn't supported yet, but do any of you know if it will support multiple channel audio once the audio tag is supported? Does opera mini support this?
This is an old question I know :).
iOS Safari does not support multiple audio objects playing at the same time. Also, it is not possible for having a fade-in/out effect for iOS, as the only way to change the volume setting is from the hardware itself. Apple decided to give this ability only to the device user. Volume setting is not writable by javascript. It is not even readable (always returns 1).
You can check out the Safari documentation for iOS for more info.
For Android, to be honest I have no idea.
There's no direct way that I know of to have multiple channels on an audio tag, but check out this blog post on using multiple audio tags to simulate multiple channels. http://www.storiesinflight.com/html5/audio.html
I know this is a total hack but try this trick I came up with...
Go to the page below and type on the home row keys to play a blues riff (type multiple keys at the same time etc.)
http://davealger.com/jthump/
The way this works is to create invisible <iframe> components that play a sound before destroying the frame.
I know it is a total hack and I look forward to better HTML 5 multi-channel audio support in the future.