How to disable full screen on html video in LinkedIn app browser? - javascript

I have a simple video player, everything works perfectly except when the user open the player inside LinkedIn app browser it open in full screen mode
Is there any way to play a video inline on iPhone when using the in-app browser without going fullscreen?
Here is my HTML 5 video tag.
<video id="videoplayer" playsinline="1" webkit-playsinline="1" muted="" autoplay="" movieid="1" src="https://meed.audiencevideo.com/videos/mena.mp4?rand=0.16011310198007833" style="opacity: 1;" class="ended">
</video>
Note : solution can be using javascript or jquery etc

Related

A play video symbol on the Iphone

I created a page with a video in the background. It works great on desktop, but when I check it works on iPhone through the "Live Server" visual studio code add-on, it doesn't show the video, but displays the play icon. I tried everything I found on the internet. How can I make it disappear from the page on iPhone and the video starts automatically?
<video type="video/mp4" src="background.mp4" autoplay muted loop playsinline id="vid"></video>
Iphone page test
I tried to start the video with js method video.play(). It didn't work

HTML5 video player ,How to control on progress bar?

I search for solution in many questions but I didn't get answer, I have HTML5 video play :
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="{{asset('promos/'.$course->id.'.mp4')}}" type="video/mp4">
<source src="{{asset('promos/'.$course->id.'.m4v')}}" type="video/ogg">
</video>
it works fine but I cant control in progress bar ,I can't move video forward or backward ,How can I do that ?
is anyone can help ?
Video Link
https://streamable.com/k3rved
You HTML5 looks fine - the video below will allow moving forwards and backwards using the scroll bar as a working example to refer to:
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
If the issue is the lack of thumbnails when you hover over the progress bar, then these need to be generated separately on the server side and included in the video container (e.g. mp4) that you make available.
Update
The video link in the question above is not actually a link to a video, rather it is a link to a webpage.
This webpage does indeed contain a video, along with the videoJS player, when you inspect it, but you can't use the webpage link as the 'src' attribute in a HTML5 video.
Assuming you have permission to use the video, you can extract the src from the video at that webpage. This works in this case, at the time of writing anyway - sometimes videos in a webpage will have access restrictions or authentication requirements to prevent them being accessed from other sites.

Html5 Video Player is not working in Safari

I am implementing a video player using <video>. This is working in Chrome, Firefox, and Internet Explorer but is not working in Safari.
$("#vdsourceVideoPath").attr("src", "http://localhost:3000/Documents/upc and shelf info_0001.mp4");
var player = document.getElementById('vdTrainingVideoPlayer');
player.load();
player.play();
<video id="vdTrainingVideoPlayer" class="vdTrainingVideoPlayer" controls="controls" autoplay="autoplay">
<source id="vdsourceVideoPath" src="" type="video/mp4" />
</video>
player.load() and player.play() method are giving errors in Safari.
You could use the YouTube player
Use the youtube site to find the video you want
Click the 'Share' button below the video
Click the 'Embed' button next to the link they show you
Copy the iframe code given and paste it into the html of your web page.
Check out this link
This article gives a good run through of implementing a html5 video player
http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473

Vimeo video not working on mobile site

hello I have embedded vimeo video in my website. It is showing accurately when view the website on desktop but it is not showing up on mobile. Here is the link of the website
http://bit.ly/1KtFBbq
Please any one has the idea whats wrong here.?
You have to be a pro member for vimeo to generate mobile versions automatically
Seems like you are using flash to play the video. This is not supported in many browsers and mobile. Better user HTML tags.
<video id="my_video" controls class="pull-left hideit">
<source src="thesource.mp4" type="video/mp4" />
</video>
They are best supported. Cheers!

How can I get a HTML5 video in phonegap to appear in a div ( not fullscreen )

I have a video on a page in my phonegap app that uses the html5 video tag
<video src="video.mp4" id="player" webkit-playsinline>
</video>
but when I click on the video it turns into a fullscreen video player, I want it to appear like it would on a normal webpage as I need to display other content underneath the video while it plays, how can I do this?

Categories