Video.js need to make full screen without adding allowfullscreen to parent iframe - video.js

I'm working in an environment where I can't add allowfullscreen to the parent iframe of the page that contains the videojs videos. Currently, the full screen button does not make the video go full screen.
If I embed a youtube video for instance on the same page it has the ability to go fullscreen.
Is there a way to modify the videojs code to work in a similar way? My javascript knowledge is average so this might be too big for my britches.
Thanks,
Jeff

Related

How to automatically play unmuted video when changing slides

I have a video slideshow that is created using Swiper JS. Ideally I'd like to make the videos automatically play without muting them when changing slides. I have a play button on top of the video. I don't want users to keep clicking the play button when they change the slides. Is there a way to achieve this without muting the videos? I see the web-based Tiktok site has been doing it. Not sure how they managed to do it.
Thanks in advance!

Facebook Cover Video in vue.js

Facebook's functionality which needs to be recreated is described really well in this video: https://youtu.be/CMKJoK3DI50?t=128
Our stack is Laravel + Vue.js 2 on a LAMP server.
the ability to upload the video, and after the video is uploaded, the ability to move the video behind the player so that it is "cropped" (see youtube video above, #2:20) - i am not sure if facebook actually crops their videos or simply leaves it whole and changes the placement of the video behind the viewable player so that a certain area of the video is shown, but the entire video is playing behind the "mask".
Any pointers on the best way to get this done in vue.js? And is the video actually cropped, or just "masked".
thanks, Sebastian

HTML5 Video - Auto select correct resolution

I'm working on a page that has a list of houses for sale. Each listing has a short video with the option of watching in the page or full screen.
I'm struggling a little with having the videos on the page at one resolution and the fullscreen at a higher resolution - this is needed especially for devices that automatically go fullscreen when the play icon is pressed.
I've had good results with video.js (http://www.videojs.com/) for the page resolution but it doesn't appear to support resolution change on fullscreen. I found this thread with comments about the HTML spec and changing resolution mid-stream: https://github.com/videojs/video.js/pull/233.
I'm told the embedded Youtube player selects the correct resolution automatically but the branded player makes this a non-starter.
Also I've found that in IE10 without Flash that the embedded Vimeo player doesn't function and in Chrome without Flash the Vimeo and Youtube players fail as well... so much for HTML5!
So anyone have a solution for showing video at the correct resolution (low/high) for the state of the player (contained/fullscreen)?
Your question answered a query of mine. It looks like auto switching resolution is still not implemented in videoJS other than for YouTube videos. There is a demo at videoJS Resolution Switcher and you can see in the console that changing window resolution to full screen has no effect.
I've been using the JWPlayer for several years with no problems at all. It reliably supports auto switching has many features and very good support.

Embedding YouTube video into a wall

I have an app, that has a wall, in which there can be text and YouTube links. What I want to do is to detect if that video is from YouTube, that's not hard, but the other part is to play it inside the app, not exiting it. Which I find quite hard to do.
Should I look into UIWebView, or that would only play all the videos?
If you open a youtube link in a uiwebview, this will give you the proper experience.
To do this, create a webview and display it modally (or in a navigationController). Then send the URL request with the youtube link to the webview. You will then have to either manually or automatically dismiss the webview.
Take a look YouTube video in UIWebView and UIWebView modal YouTube player "Done" button action .

Play Video on Mobile Safari for iPod touch

I have a web site that opens iframe for video on page, page uses ajax to pull in videos from selected menu. As expected and understood, on iPod touch after selecting video it shows a play button, which brings up video in another screen. However, when the video completes, it returns browser to page prior to one where video was played from. Sequence:
open Page1
go to Page2 which offers videos to play, in iframe
play video
video completes, returns to Page1, not Page2!!
Only happens on iPod touch, so must be issue with how control is returned on video completion.
Any suggestions? If this is not a known problem, I can work up example (currently, need account on site).
Of course, because the browser returns the URL of the page that was displayed before the video was played back. It won't remember the URL of the IFRAME, that had already changed in the process of selecting a video, if I don't get you wrong.
That's a common problem with frames/iframes and one reason why you shouldn't use them.
The solution could be to place your video selection menu in your actual page and not in an IFRAME. This could be achieved by loading in into a DIV via Ajax for example.
Figured this out, sort of. Got it to go back to the right place, but I do believe that it is easy to confuse the iTouch quicktime player and Safari about where to return to.