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>
Related
I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one:
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the New Policies for iOS and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:
Removing overlaying divs won't fix it
Removing z-index won't fix it
Wifi or Cellular doesn't make a difference
Video filesize doesn't make a difference, too
Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9
Does playsinline attribute help?
Here's what I have:
<video autoplay loop muted playsinline class="video-background ">
<source src="videos/intro-video3.mp4" type="video/mp4">
</video>
See the comment on playsinline here: https://webkit.org/blog/6784/new-video-policies-for-ios/
iOs 10+ allow video autoplay inline. but you have to turn off "Low power mode" on your iPhone.
Here is the little hack to overcome all the struggles you have for video autoplay in a website:
Check video is playing or not.
Trigger video play on event like body click or touch.
Note: Some browsers don't let videos to autoplay unless the user interacts with the device.
So scripts to check whether video is playing is:
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});
And then you can simply autoplay the video by attaching event listeners to the body:
$('body').on('click touchstart', function () {
const videoElement = document.getElementById('home_video');
if (videoElement.playing) {
// video is already playing so do nothing
}
else {
// video is not playing
// so play video now
videoElement.play();
}
});
Note: autoplay attribute is very basic which needs to be added to the video tag already other than these scripts.
You can see the working example with code here at this link:
How to autoplay video when the device is in low power mode / data saving mode / safari browser issue
I had a similar problem and I tried multiple solution. I solved it implementing 2 considerations.
Using dangerouslySetInnerHtml to embed the <video> code. For example:
<div dangerouslySetInnerHTML={{ __html: `
<video class="video-js" playsinline autoplay loop muted>
<source src="../video_path.mp4" type="video/mp4"/>
</video>`}}
/>
Resizing the video weight. I noticed my iPhone does not autoplay videos over 3 megabytes. So I used an online compressor tool (https://www.mp4compress.com/) to go from 4mb to less than 500kb
Also, thanks to #boltcoder for his guide: Autoplay muted HTML5 video using React on mobile (Safari / iOS 10+)
I had the same problem - the video not play on iOS. I tried all the code options "playsinline autoplay loop muted". The problem was the video I received was in the wrong mp4 codec. So what helped us, was to upload the video to Vimeo and download the HD Version again. The video is now playing on all mobile devices.
You could also try to use mpeg streamclip. Here is a screenclip of VLC - those are the correct settings. Hope someone does not have to spend 2 hours searching for the problem - happy holidays
Here is a simple solution to auto-play the video in IOS, I've already tried and it is perfectly working on IOS, Android, also on all the browsers on various platforms.
simply use (data-wf-ignore) and (data-object-fit) Attributes for the video and data-wf-ignore for the source tag..
You can see the working example with code here at this Snippet:
<video id="myVideo" autoplay="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" data-wf-ignore="true" />
</video>
I’m developing an iOS app with a looping video embedded into a div. I’ve got the “webkit-playsinline” working so it prevents apple’s fullscreen video player from kicking in… but there’s a glitch. As soon as the video begins its first loop, for some reason it forgets that its set to play inline and goes fullscreen.
Here’s my workaround in case this is frustrating anyone else out there:
<video class=“myVideo” width="640" height="360" autoplay webkit-playsinline>
<source src=“video.mp4" type="video/mp4" />
</video>
Rather than adding the “loop” attribute to the video tag, I use jQuery’s .on function to play the video again when it ends like this:
var myVideo = document.getElementsByClassName('myVideo')[0];
$('.myVideo').on('ended',function(){
myVideo.play();
$('.myVideo').attr('webkit-playsinline', '');
});
I also reminded the video that we’re playing inline just incase it gets any funny ideas and tries to run in full screen mode on replay… viola! problem solved ;)
My requirement is I do not want to show the video playing in full screen.
For that initially, I choose the MPMoviePlayerController. By using this static videos i.e, which is in our app are playing well but the YouTube videos i.e., contains URL are not playing, instead of that it shows blank screen.
I tried in these ways:- http://pastie.org/8484597 You may think that all the ways are same.. But I tried all the ways as I googled I got these are all the ways.
Later, I moved to UIWebView. Yes, it is absolutely good.. it is playing my videos with No Doubt. Here I am extracting the youtube id and playing. But here, I do not want to play the video in full view. But when I want to play the video we have to click on the UIWebView then instantly it is showing full screen with video playing. But, I want to play with in the web view only.
I followed this link but same problem.. Display video inside the Uiwebview not in device full screen
I tried in these ways.. http://pastie.org/8484621
(I used LBYouTubeExtractor also. it plays good but it is not playing all the videos. For some videos it throws _itemFailedToPlayToEnd error).
Please guide me how to do in UIWebView?.
Wrap the video within a html file and remember to add webkit-playsinline and change the webview attribute webview.allowsInlineMediaPlayback =YES; Then load the html file with the webview. This works for me.
The html file is like
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video
webkit-playsinline
src="prog_index.m3u8"
height="200" width="200"
type="video/m3u8"
>
</video>
</body>
</html>
Cheers!
i created a small website that includes a video with this code:
<video autoplay="autoplay">
<source src="inc/WEB_MASTER.mp4" type="video/mp4">
<source src="inc/WEB_MASTER_ios.m4v" type="video/mp4">
Your browser does not support the video tag.
</video>
When i load the page via my iPhone the video starts playing, but it does not play it in the part of the website, instead the iphone plays the video in fullscreen. How can i force the iphone to play the video in the respective area on the website?
Thanks.
The iPhone and iPod seem just about the only devices/browsers that force fullscreen video playback in Safari (and in apps that make use of its unmodified WebView)
You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
I wrote a module that takes care of playing the video inline and synchronizing it to the audio (but it also works on videos without a sound track): iphone-inline-video
This question is answered here:
HTML5 inline video on iPhone vs iPad/Browser
Just add the webkit-playsinline attribute to the video tag. Works in iOS 4.0 and later:
<video id="player" width="120" height="60" webkit-playsinline>
Here is the official documentation for webkit-playsinline.
I am developing a site targetted to webkit(android and iphone) . Since webkit supports Html 5 video tag so i decided to use this tag to play videos.
Due to design issues, I can't show the video place holder on the page. Design demands a play button on the page which is when clicked will start playing video in full screen mode.
So I decided to set the width and height of video element to zero to hide the control and use javascript to play the video. Here is my code
Play Video
<video id="myVideo" src=""></video>
<script type="text/javascript">
function playVideo()
{
var video = document.getElementById("myVideo");
try {
if (video)
video.play();
else
alert("video control not found");
} catch (error) { alert(error); }
}
</script>
.So far so good and it works perfect in android and iphone/ipod prior to IOS 4+
In Iphone 4. Clicking on the link does execute the playVideo function but does not play the video and provide no error.
Can anybody tells me w