embed youtube video with jwplayer on mobile device - youtube

when I try to play the video from this link on a mobile device it's play with jwplayer, but when I've tried to implement the code suggested from the same link in my own website it's automatically play the video with youtube player.
how can I play the video with JWplayer on mobile ?? (android, ios)
the code:
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
file: "http://www.youtube.com/watch?v=8CjdLYBDUqw",
width: 640,
height: 360
});
</script>
thanks

Related

Issue with IOS playing html hero background video in full screen media player. Html within a react Website displaying on React Native WebView on iOS

Problem:
React Website has component with a Video background that is muted, autoplay, loop and this has worked fine for every device until recently.
We have a react native app that has a simple webview (react-native-webview) and on iOS when this webpage is loaded with the video element, it pops it up in a separate media player.
I've tried all settings I could think of and nothing tells the native iOS device (iPhone X) from opening this background video in a separate media player, looking for solutions to prevent it. But not wanting to block the native app from loading videos in future too.
<video alt="second slide" class=" hero--video " autoplay loop muted playsinline id="html5_video_vgqpodxt0jc2113" style="max-width: 100%; height: auto; width: 100%;">
<source src="https://mition.blob.core.windows.net/mition/PRODUCTION/media/World%20-%201992.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
The react-native webview can add the following code to prevent it from popping out
mediaPlaybackRequiresUserAction={false}
enter code here
However I am facing a seperate issue that it doesnt play at all in background

Blazor progressive web app show camera on ios

I have a blazor web app which uses the camera to scan differen qr codes (using the zbar implementation for blazor). On windows in different browsers and on android in different browsers i get to see the feed the camera generates. However Ios and safari keep not showing the camera feed. my code in typescript is the following:
const mediaStream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
facingMode: 'environment',
width: { max: 640 },
height: { max: 480 }
}
});
and in my blazor page i have the following:
<video #ref="video" autoplay loop muted playsinline controls="controls"></video>
Safari show the controlls of the video player correctly without any problem but no camera feed. Sadly i do not have access to the debugger console to see the log from safari to see what is wrong in the page.
i found some references that the camera feed needs to be in a correct size and that the controls needed to be visible for it to work. but to no avail. On the different devices we have set the permission to camera and microphone to allow but we don't see the popup for allowing the camera feed in the browser.
Is there someone who has an idea what is wrong? We haven't tried to install a different browser yet but would that work?

Cordova Phonegap HTML5 Sound doesnt work until after I record a video

I cant find the reason for this anywhere.
We have an app where you can record a video and then see other people's recorded videos. If you don't record a video and you just login and try to play other people's videos, the video will play but the audio doesnt.
The moment that you try to record a video and the video camera opens up, if you go back and play any video - the audio starts working. Its the weirdest thing. We're just using HTML5 for the video. It works on Safari, just not on the PhoneGap Developer app or when we compile into a native iOS app.
Here's a the block of HTML that has the video code
<video style="box-shadow: 1px 0pc 1pc 1pc rgba(0, 0, 0, 1);z-index: 3626722;max-height: 250px; width: 100%; border-radius: 8%; max-width: 250px;" controls="" class="vsc-initialized" data-vscid="bjw06681d"><source style="max-height:200px" src="http://18.216.250.32/GoWithMe/media/videos/121.MOV" type="video/mp4"></video>
The sound works on Safari, Chrome, just not in Phonegap until you record a video. Any idea's?!

Play YouTube or Vimeo Video on iOS fullscreen and without WebView

I know there are various libraries and approaches to play Youtube or Vimeo videos on iOS inside WebViews. Is there a way to play such a video without the use of a WebView at all? All I want to do is have my own "show video" button and when it's pressed then the default fullscreen video player on iOS should open and play the video from YouTube or Vimeo. Is that possible?
You can try with
https://github.com/0xced/XCDYouTubeKit
as reported in this thread:
How to embed a Youtube video into my app?

iOS: HTML5 video, continuous playback while remaining in fullscreen

I am currently developing an iPad app that aggregates various video feeds on the internet. Then using a UIWebView, some Javascript, a <video> tag, and the mp4 URL I can playback the video and the native iOS video controls appear. This all works great.
Additionally by subscribing to the video 'end' event, I can queue up another video to play after the one you were watching finishes. This also works great, EXCEPT if you were in fullscreen when the next video starts to play, you are taken out of it and back to the app!
Does anyone know a way that I can persist fullscreen HTML5 video in iOS when a new video is loaded?
The following worked for me on mobile safari on an iPod touch. Listen for the end event and change the source of the current video tag to the new video.
<html>
<body>
<video id="myVideo" src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v" autoplay>
</video>
<script>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the event
document.getElementById('myVideo').src='http://movies.apple.com/media/us/html5/showcase/2010/demos/apple-html5-demo-tron_legacy-us-20100601_r848-2cie.mov';
}
</script>
</body>
</html>

Resources