Video will not play a second time on iOS devices - ios

I'm not sure what the problem is. I have a video that I'd like to play in a modal dialog.
I have everything set up and working fine on all devices. The only issue that I've been unable to overcome is that the video will not play a second time on iOS devices.
http://c4sandbox.com/video/index.html is a simple demonstration of the problem that I'm having. If you close the dialog (it will auto close when the video ends) then click the 'show again' link on an iOS device, then the video player is just an empty black box.
What am I missing? This happens in Safari and Chrome, but only on iOS.
EDIT: The problem appears to be with video.js because a straight html5 video tag will play the video multiple times as expected. Unfortunately, I need the flash fallback so html5 only is not an option.

I'm having a similar issue. The way I am getting around it is using the player's dispose() method to kill the instance and re-injecting the HTML for the player and re-instantiating it.

Thanks #Victor! your solution works. Since there is no example code given, here is the code I used.
//Init
videoPlayer = _V_("video_post", {
controls:true,
preload:"auto",
autoplay:true,
}, function(){
});
after you're done with the player (e.g. closes the video dialog), dispose the player
videoPlayer.dispose();
Done. hope this helps.

Related

iOS Safari + Vimeo iframe, detect "Done" button press in native player

I have a Vimeo iframe embed on a mobile site, and am trying to figure out how to detect when the user presses the "Done" button in the native iOS Safari video player.
I know this is possible with the "webkitendfullscreen" event if you are embedding with a video tag directly (as described here):
$('video').bind('webkitendfullscreen', function()
{
console.log('on webkit close');
});
However, the video object is not accessible in the case of a foreign iframe embed.
I have not, so far, been able to find a good way to get this to happen, after quite a lot of keyboard-head-banging. I really hope Vimeo adds a way to do this in the future. The only thing I have found is in their new JS API, there is an event fired when the video has ended, and you can latch on to that and do something if they watch the video all the way to the end. You can also detect when the user pauses the video and do something after a "reasonable" time-frame, depending on what you are trying to do.
My hope was that I would be able to close the corresponding modal window whenever someone closes out of a video, but that was really not a possibility.
you can use the leavepictureinpicture event
myPlayer.on("leavepictureinpicture", () => console.log("leave pip triggered"));
https://github.com/vimeo/player.js/blob/master/README.md#leavepictureinpicture

Siri voice to Text breaks AVPlayer video

I have an app that is streaming Video data using an AVPlayer. The AVPlayer is using a APLEAGLView to render the pixels to the screen.
The issue I'm having is that I have a textbox within the same view. If you tap on the textbox and enter text with the keyboard it works fine.
However, if I use Siri's voice to text function on the textbox, then try play the video again, the audio plays and currentTime changes but the video is frozen on the frame that was there when you began the voice to text function.
This was fine previously but since a recent Apple update this is now broken.
Any help would be greatly appreciated as one of our biggest client's is complaining about this.
So I could not find the exact cause of the issue, but I did manage to fix it.
The issue was that the previous developers used an OPEN GL ES View to render the pixel buffer to the screen. I refactored it to use the standard AVPlayerLayer functionality and that fixed the issue.

how to close the native video player in Air for iOS using StageWebView

I open a video to play in the StageWebView:
var webView:StageWebView = new StageWebView();
var path:String = 'http://www.winterlife.com/files/apps/zhdk/test.mp4';
webView.stage = this.stage;
webView.viewPort = new Rectangle( x, y, width, height);
webView.loadURL(path);
This works fine, video starts playing.
Question 1: If I want to close the StageWebVideo, I touch "Done/Close". But nothing happens, except the video stops. (I want to close the video player and go back to my app.)
Question 2: How can I set the video to autoplay?
Question 3: When I start StageWebView, a white background appears for some short time. What is that, and how can I avoid it.
Thank you very much!
You have zero control over the video player in StageWebView by default. No events, no auto-play, nothing. What you want to do is simply not possible using that component.
You have two options:
Use a replacement ANE that mimics the functionality and gives you access to the things you want. UIWebView from Darkredz may be a possible substitute, though I haven't used it in 18 months, it hasn't been updated in 12, and it's not free.
Use StageVideo and build your own player around it. This is my preferred method. It still uses the native video player, but gives you great control over the video and a plethora of events to listen for. Plus you can design your own controls for it.
You can close the native video player by adding StageWebView in the popup container with a close button. Because, .mp4 is not supported flex video player in ios, instead of this we use native player to play the video.
While we use StageWebView it automatically take Native player in IOS. So we can add StageWebView in a popup container with a custom close button for dispose() StageWebView and close the popup container. By this method we can close our native video player in IOS.
StageWebView is always open in top of our application, when you click the link, the popup will open in top of the application, and stagewebview also will open in top of the application. You can modify the viewPort for adding close button.

How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?

The HTML5 <video> tag offers the user a button to toggle on and off the fullscreen mode on Safari for mobile devices (iOS).
I would like to capture and handle this user action but it doesn't seem to raise an event when the button is pressed and the player enters the full screen mode.
Here is the link to the Safari API for the HTMLVideoElement class:
https://developer.apple.com/documentation/webkitjs/htmlvideoelement
We can easily find out when the video is paused of played in Javascript, like this:
function onload()
{
var player = document.getElementsByTagName("video")[0];
player.addEventListener('play',videoPlayHandler,false);
player.addEventListener('pause',videoPauseHandler,false);
}
However they don't seem to have any events for when the video enters the full screen mode.
We can force the video into fullscreen mode in response to user action by calling the webkitEnterFullscreen(), but that doesn't help me. I need to know when the user taps on the fullscreen button.
Hiding the controls and replacing them by my own custom controls sounds like a really long winded solution.
Another option I can think of is to set a timing event, constantly checking for the webkitDisplayingFullscreen property, but that feels like a bad thing to do in terms of memory management.
Can anyone suggest a better solution?
After much faffing around a friend finally pointed me in the right direction.
The events I was looking for are: webkitbeginfullscreen and webkitendfullscreen
var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);
With that I can safely capture when the user clicks over the fullscreen button on Safari for the iPads. Interestingly the same events don't seem to work for Safari on the iMac (tested on version 5.1.2).
Thanks Apple for their inconsistency and hours of wasted time.

How do I make my HTML5 video player autoplay on iPad, like filmon.com?

I'm trying to create an HTML5 video player to automatically start streaming video. I searched a lot but I didn't achieve my goal.
Then I found www.filmon.com, where all videos start to play automatically on iPad.
Does anyone know how they did it? I looked at their JS files, but I cannot make mine start automatically.
Apple has specifically disabled every method and workaround to autoplay video on iPads and iPhones (the "autoplay" attribute, and Javascript solutions like triggering hidden link's "onclick" event).
I have yet to find a way to autoplay on iPads and it looks like Apple is continuing to squash all efforts to do it. They state, "In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it."
As a quick update I just checked out Filmon.com and the videos there no longer seem to be autoplaying on an iPad. Example: http://demand.filmon.com/distant-roads-173-cnd-ontario-ca-1 autoplays on Chrome, but not on the iPad.
I don't think that iphone or ipad play streams automatically due to high traffic.
Why don't you play it manually using script at document ready?
somewhat like this:
window.onload=function(){
var audio = document.getElementById('audio');
audio.play();
}

Resources