Change resolution for a video on Chrome using Console - javascript

is it possible to change the resolution of an embedded video via console? Previously, I happened to find a pretty cool trick to speed up a video (even exceeding the default speed options) just by typing this command on console document.querySelector('video').playbackRate = 3.0;. I wonder is there any similar trick for video resolution. My specific case is that I am doing online learning and want to have the videos to be of higher resolution. These videos are youtube videos that offer multiple options for resolution (on youtube) but the webpage which I learn somehow doesn't show the button for personal customization. I am a non-tech person so step-by-step guidance would be very appreciated.
Image of Edx Video: Always default at HD
Edx webpage links to the above image: Require account and sign in to view
Link to youtube video: offer multiple quality setting

Try right click on the video and see if you can get the URL of the video, then, watch it in YouTube.
Other options could be (since you're using the Google Chrome console):
Right click on the YouTube video > Inspect element and see the source code: there, for sure the YouTube video link
Or, (in the webpage you're inspecting) press ctrl + u (for get in a separated tab in your browser), then press ctrl + f and search for YouTube.
Any of the previous options will allow you to get the YouTube video in a webpage and you just copy and paste the obtained URL and watch directly the video on YouTube.

Related

how can i detect if an iframe video not working

I've seen some website have a video in multiple video streaming websites like Fembed or vidcast and some of the time the links are broken for whatever reason but I've seen a website that actually detects if the video source is broken and changed to a new one I wonder how can I detect broken link in Iframe?

Open MP4 video on smartphones in full screen mode via Javascript/jQuery

I have a video in MP4 format sitting in a directory on my website. On a smartphone, when someone clicks a link, I want to open the video in full screen mode, while leaving the website exactly where it was before. So that after the video plays, the user can close it, and the website is still there. What is the best way to do this?
I already have a separate link for smartphones. I am handling the video in a different way on other types of devices.

Inserting an icon to the right of the page title in Chrome

I recently noticed that when viewing YouTube videos in Chrome, it inserts a fancy looking audio icon into the tab when the video is playing. However the icon is not part of the actual page title, but instead appears to the right of the page title, like this:
Notice how the actual page title is truncated due to the tab length and fades out on the right hand side.
How is this accomplished? Is there an HTML or JavaScript property that can insert this icon there? What other icons, if any, can be used?
Note, I realize this is not cross-browser property since it doesn't work for FireFox. I'm wondering only about Chrome/Chromium.
we don't need any script to do that. It's a feature developed by Chrome developer. Chrome will automatically display the icon when there is an audio or video playing.
More info.
Chrome added the icon to any tab making sound. The idea is that when an Ad or music begins randomly playing, it needs to be easy to find and kill.
There is no HTML, JS, etc. that adds the icons. Anything that creates sound will place the sound icon on the tab in chrome -- while the tab is making sound.
The only similar icon I know of is the Chrome Cast icon, but that requires the Chrome Cast extension.
Chrome does insert this icon, if I play video on other site, then it looks like

External play button iPad

Is it possible to make an external play button for a video without the play button in the video?
For example when you want to start a youtube video you see a red button in the middle of it. I want that hidden and a button outside of the video to start the video. It doesn't matter what video player it is.
I want to do this because iPad does not allow autoplay. And using the external button I want to trick it to autoplay.
This is a website that does "autoplay" on the iPad.
http://24hoursofhappy.com/
There is a reason why YouTube doesn't allow autoplay on mobile/tablet devices, video's use up alot of bandwith which may become expensive for the user.
U can trick it like u mentioned with a custom play button or even force it to start playing without a custom button. There is alot of detailed information on YouTube's API page.
Check out this page: https://developers.google.com/youtube/
I'd refrain from always autoplaying a video though if not just for bandwith reasons. In your case u could check if the device is a tablet.
I finally found an answer for this using HTML5 videos. It allows me to use the control buttons externally so I can use an overlay and hide the overlay when the play button is clicked so it will seem like it is auot played.

Embeded youtube view gets counted with Javascript API but not with IFrame

*Situation is -*I have to design a webpage that works on both desktop and on mobile devices, that plays an embeded youtube video (not autostarted) which then i can use interact with the video to get the play state etc (using this to count the total time watched, excluding pause/buffer/stop time)
I've managed to build the website using both the IFrame API and Javascript API from Youtube.
*However the problem is-*With Javascript API, the player on the desktop works and the view gets counted too but it doesnt work when i view it on a mobile device. The place where it should show the video (the div tag) doesnt react.
With the IFrame API, everything works in terms of functionality but when i press play on the video, the views do not get counted - accessed from both desktop and mobile. I've tested the viewcount several times, with different IP etc but while javascript API web gets counted instantly, IFrame API web is still not getting counted..
Does anyone have any suggestion to this problem?
Just to remind you, the crucial aspect of the webpage that i need are:
Embeded Youtube player
Being able to interact with the player (e.g. getState() or getDuration())
Website fully functional with mobile access
Valid view count
Thank you all in advance!! :)
Are you sure that the views are really being counted via the javascript api? I have always read that view counts only are considered valid when initiated using the actual YT play button. Meaning you can't initiate play via any API call and have the view count.
Here is a a somewhat dated blog post from Google/Youtube team explaining - https://groups.google.com/forum/#!msg/youtube-api-gdata/7SsbvOJMWL0/rBCBqnFaxRgJ
I'm trying to find something that says this has changed but so far no luck.
** EDIT **
So I went back to the iFrame and Javascript API pages and if you do a search for 'view count' the first piece of content you'll find is a line stating --
"Note: A playback only counts toward a video's official view count if it is initiated via a native play button in the player."
Re-reading your post I'm not sure if you are using the API's to play the video or just to get data from its current state. If you are using it to actually initiate play then the view counts are not actually being counted. If you are seeing something different I'd love to see and learn from it.

Categories

Resources