I am facing the problem i want to use the html5 video player, but with a pitched sound.
what i have tried so far is setting the playbackrate of the html5 player higher and then lower, but this only messes with the playback rate (as it actually tells us). It does not change the pitch of the audio of this html5 video-player.
I know this google chrome plugin:
https://chrome.google.com/webstore/detail/pitch-shifter-html5-video/mpmkclglcbkjchakihfpblainfncennj?hl=en-GB
This does change the pitch of html5 players, but i dont know how to do the same but then without any plugins and just programmatically do this.
I have looked through the docs of HTML 5 video:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
but this does not give me an answer.
Can anybody help me?
Pitch cannot be independently adjusted in HTMLMediaElement
https://github.com/whatwg/html/issues/1833
It might be possible to extract the audio track to Web Audio but that looks too complicated. https://webaudio.github.io/web-audio-api/#dom-biquadfilternode-frequency
Related
Currently, I've observed that the audio player added via HTML tag looks different in appearance in Chrome and Firefox.
Is there any standard we can follow to make its appearance same across browsers or implement custom player in an easy way to achieve the purpose?
Yes, we can have customised audio player which can look same across all the browsers. But the thing is we need to do styling and develope functionality of that audio player like
a play/pause button
a seek slider
the current time indicator
the duration of the sound file
a way to mute the audio
a volume control slider.
May be the following article will help you
https://css-tricks.com/lets-create-a-custom-audio-player/
Yea You can have it.
You Just Need to write the Appearance .css for all platform Respectively And Explicitly
I have a lot of video on my webpage. I noticed that some of them load very slowly. I think the reason is the resolution.
How can I speed up the loading of my video? What are your the past experience with html5 video settings? Which video resolution, frequency rate and so on should I use? Is there an advantage if I use a video player like VideoJS instead of default HTML5 player?
I would be grateful for every snippet of advice!
(Creator of video.js here) what you’d benefit from is a multi bitrate adaptive streaming strategy, creating smaller resolutions of the file for lower bandwidths, helping it always start quickly. You could use video.js with the HLS plug-in, or HLS.JS with the bare video tag. You’d get similar results between them. FFmpeg and any of the encoding services can create HLS files and manifests to support this approach. It does mean hosting more files per video. Mux.com can also help with this at scale, but I’m one of the founders so take that into account.
I have video that will be divided into 4 videos.
First the player will stream a lower resolution of the original video, then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
How can I make that using VideoJS or any other video player ?
After searching, this is the answer ...
For zooming into the video, you can follow this tutorial: Zooming and rotating for video in HTML5 and CSS3
For switch streaming of videos in the same player, you can make that by changing the source on html5 video tag and make some calculations to know where the user zoomed in and hence change the source video.
As there is no response yet let me analyse the problem. This is by no means meant as a full answer, but other people will probably be able to answer parts of the problem:
First the player will stream a lower resolution of the original video,
This means you will need to create/use a video stream. There are plenty of plugins you can use for videostreaming, and depends on what you want. You can consider writing it yourself using for example C#'s System.IO objects and transforming the video in bytes(And putting it back together) The resolution would be easiest reached by just having a seperate video file for this step of the proces. (a lower resolution one used for streaming only)
then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
So you need to trigger a zoom effect. This means you would need to detect zoom. This would be possible with Javascript in a webbrowser, if you want a browser based application. When that zoom is triggered you can retrieve what position the mouse is on the screen/in the div or on some sort of overlay. Depending on this position you could show another stream.
How can I make that using VideoJS or any other video player ?
Basically these steps above is how i would start looking into this specific case. Considering your VideoJS as a suggestion i assume this is browser based. This would probably mean using Javascript libraries, maybe combined with a server side language.
Thats as far as i can go. Maybe someone can pick up specific parts of the thing i wrote and help you a step further.
Have a nice day!
Just trying to work out what the standard aim is for html5 video in sizes, currently I have my videos around this size:
WebM - 4.1Mb
MP4 - 4.9Mb
Ogg - 8.1Mb
Is this acceptable and would this be affecting the speed of my video as at the moment it seems to be freezing.
Thanks
I suspect that your carousel is trying to play the videos before they've loaded enough data (so you're seeing stuttering and freezes).
You'll probably need to look into the javascript HTMLMediaElement API, making sure you don't start automatic playback before the readyState reaches HAVE_ENOUGH_DATA.
(By the way, if you need compatibility with older browsers too, have a look at MediaElement.js, which gives you the same API, but with a Flash/Silverlight fallback too.)
Can I click on some time and eventhough the video is not downlaoded till that time and the video starts playing from the time I clicked?
If yes, what would be a better option for viewing streamed video- HTML5 or flash player like JW player? WHich one will have less lag?
HTML5 browsers generally don't support this, however I believe the video tag in Safari will work with the Apple HTTP Streaming format for this functionality. For something that works across all browsers, Flash Player can do it using either RTMP streaming or HTTP Streaming (either with our without OSMF to support this). Probably the easiest place to start is with OSMF, which supports both RTMP and HTTP streaming of video.
I have tested this with Firefox and Firebug and while you can "seek" to a point in the video without having to watch video preceding the point you wish to seek, this still causes the entire video file to download.
Indeed, each time you seek in Firefox 4, the entire video downloads.
This may change and improve as HTML 5 video implementations become more mature and may differ based on the actual browser being used.
More information on the test here:
http://www.stevefenton.co.uk/Content/Blog/Date/201106/Blog/HTML-5-Video-In-Real-Life/