HTML5 Video - Give User Options for Playback Speed - html

I was wondering if there was a way to give a visitor the option to speed up or slow down HTML5 video? Here's how I'm embedding the videos:
<center><video class="video" width="1024" height="576" src="Videos/' . $_GET["video"] . '" controls autoplay>If you\'re reading this, your browser sucks. Upgrade your browser to watch this video.</video><center>
Is there some way that I could incorporate some controls for the user so that he/she can control the playback speed? e.g. buttons to speed/slow up/down (respectively) the video by X amount?
EDIT:
I've found this plugin (github link), and I was wondering if there was a way of incorporating this, or something similar, directly into the website so that the user would not have to install the extension. The reason that this plugin is actually pretty good, is that it allows for the playback speed to be altered whilst the video is playing.

In order to control the playback rate, you can using playbackRate property. Please look at this question which answers your question answer

For speed-control via keyboard keys try stackoverflow.com/a/67440385
(Someone please delete duplicate comments above, and move THIS comment to answer #1, where "add a comment" was ACTUALLY clicked - TY -- Sorry, cannot even flag this issue.)

Related

HTML5 video loading slow

I have videos on my website that are taking very long to load.
I don't think it is my webhost since it also happens on localhost.
Each time there is only 1 video shown to the user, depending which category they chose. (So it is not loading each video always).
The videos that take longer to load are the bigger ones (the biggest one is about 351MB video file)
This is my html code for the video:
<div class='video'><h2>$vidTitle</h2><video width='640' height='360' controls preload='metadata'><source src='$viddir' type='video/mp4'></video></div>
I've also read that it could be that the video indexing could be at the end, could this be the case?
What can I do about this, do I need to use another player thann the default html5 player (I tried this but it didn't really help) | do I need to use a cdn?
How can I solve this?
Thanks!
My understanding is that the preload='metadata' attribute in your video element is supposed to prevent the video from loading.
You could try preload='none' to test. I know that works.
As always, a good place to check is MDN web docs:
mdn web docs : The Video Embed element

How can you enable automatic captioning in an embedded YouTube Video?

I am having a difficult time embedding a YouTube video with the auto captioning (CC) button toggle. I have searched and the only thing I could find was documentation from Google stating I could add cc_load_policy=1 to the URL string to enable this.
After researching on here I came across this post: Youtube Closed Caption for HTML5 Not Working. One of the commenters mentioned they also set cc_load_policy to 1, however it looks like this may not longer be supported in newer videos? Is there a definitive source that states whether or not we can use automatic captioning in embedded videos? I would have assumed this should be an easy feature to add.
After extensive research and asking a good friend of mine who is a YT expert, no, it is not currently possible.
Only good workaround I see right now is Plyr: https://github.com/sampotts/plyr
Demo: https://plyr.io/
I tested it just now and it works great, but it's another plugin...
Exception: your own videos, you can turn CC on and it will reflect in the embedded versions, with a toggle button for CC (but will be on by default when the user plays the video on the page where it is embedded).
Cheers -

Best practice for creating a youtube gallery of embedded videos?

I'm curious to what the best practice is in regards to embedding youtube videos on a site? Ideally I will want to auto-play a default video with it muted while having other videos available as thumbnails.
Any recommended plugins? Should I use an iframe or an object?
Thank you in advance!
Your question is very broad: it's hard to know how to help you. If you're using WordPress, for instance, you'll have some plugins to help you do this, but otherwise it depends on whether you intend to dynamically generate the videos or manually create a page with the main video and thumbnails chosen by you in advance.
If you intend to program your page, you'll want to use the YouTube Data API (version 3 preferably, which uses JSON to keep payload sizes down).
If you're manually laying the page out, look at the watch page for a YouTube video, and you can get the embed code there. Click 'Share -> Embed' and then you'll see an iframe tag from which you can fiddle with to alter the size parameters to suit your needs.
One thing to note though: if you make a video autoplay on a page, as far as I know you forfeit the opportunity to have the viewcount increase for that video. So if you want to promote one of your own and intend the viewcount to go up each time, you have to allow users to start the video.

Is it possible to loop a list of videos?

The title pretty much says it all. I have a spot on a webpage that currently plays a video. I'd like to update the page such that I can add a line of code with a reference to a couple files located in a folder with the source, and the page will play the first video, then the second, etc. until it reaches the final video, and then play the first video again, looping indefinitely. It's extremely preferable that this line of code would be able to play video files, .swf files, pictures (for a pre-determined length of time), etc.
Currently, I'm just using a very rudimentary
<video width="100%" height="100%">
<embed loop="true" showcontrols="0" align="left" src="New Site Folder\DemoVid_sound_mods.avi"/>
</video>
The problem with this, though, is that it only plays one video, and if I want to add more parts to it, I have to edit the video itself, rather than just popping a new file in the folder.
I saw another question answered that mentioned doing this with javascript, but the whole point of this project is to make it exceptionally easy and quick to update. The main thing I'm looking for here is for us to be able to update the page by opening a file in notepad, adding a line of code, saving, and running it.
Any thoughts? Even just a pointer on what commands might be useful here would be helpful. Thanks in advance!
As far as I know you won't be able to do this with the inbuilt html5 video players native to the browser, It's just not the principle on which they are built.
What you are looking for is more of a media playlist style set of features.
You will have to use one of the javascript based html5 video players to get some of these features but even then I'm not sure of the support for swf and image files I've seen a few which do various videos and audio files but nothing HTML5 which also does swfs also as again, the premise of these players is usually to eradicate flash.
My best suggestion for doing all of these in one single embed is to use flash via the longtail/jw player or flowplayer which handles playlists etc or perhaps slideshowpro which I know does both images, video and I think audio too.
Finally.. harking back a decade or so. theres a Language which is pretty underused and suffers varied support called SMIL which supports all of these elements you mentioned however it's uptake sort of fell apart with the introduction of video in flash. I remember that Realplayer and Quicktime could serve SMIL files but I'd be pretty cautious to do anything in SMIL these days.
Hope that helps.
A

Embed a browser window within a Flash movie

My question of the day is: in the same way a UIWebView on XCode behaves, is it possible to embed a website or browser window in an Adobe Flash movie? Like an iframe, but within Flash itself.
Is this even technically possible? Do I even want to attempt this?
Thanks in advance.
The true answer is no.
But there are workarounds, one of them is the Flex Iframe mentioned above.
The workaround is based on a real iFrame rendered by JavaScript above the Flash and smart communication between Flash and that JavaScript.
The big drawback though is the wmode=opaque you have to use in order to enable anything to render above the Flash. There are accessibility issues, performance issues and even stability issues associated with the opaque mode, however sometimes you got to do what you got to do.
Check my question on this topic, especially note the Adobe Flash Player Bug and Issue link, do some investigation first to make sure it won't kill your project.
It would seem that it is possible. I have come across a few examples in the past, but never done it myself.
This link might help you with your research...
http://code.google.com/p/flex-iframe/
as might this, which has an explanation and further links...
http://www.deitte.com/archives/2008/07/dont_use_iframe.htm
I don't know how up to date this content is though.