I have a website with a list of videos to be played with an IOS device. When the user clicks on a direct link to the video to watch, the video opens in the video player. When the video is done playing or the user hits the ok button, it takes the user back to the video list.
I need to be able to fire an event in js when the video is done playing. It doesn't appear that mobile safari actually refreshes the page, just re-displays it. Is there any events that I can hook into to detect the end of the video?
Thanks!
It should work out to be like this (untested):
video = document.getElementById('yourid');
video.addEventListener("ended", function(e) {
video.webkitExitFullScreen()
});
Related
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
i try to play a DM video on a page on clicking a custom button. It works perfectly on desktop browsers but not on ios devices.
Here is how i proceed using js sdk and jquery.
function _on_apiready(){
$custom_button.one("click", _playVideo)
}
function _playVideo(e){
player.play();
$custom_button.click(function(){player.togglePlay();})
}
var player = DM.player(dom_el,
{
video:dm_id,
params:{html:1, autoplay:0, info:0, logo:0, related:0},
events:{
apiready: _on_apiready,
timeupdate: _on_progress,
playing: _on_playing,
pause: _on_pause
}
}
);
On ios devices, the video seems to load but doesn't play. I need to press the play button of the player to start the video and then may use my custom button to togglePlay.
Doing something wrong ?
Thx
this question has been answered here already: Dailymotion embedded player on iOS devices (HTML5)
Basically, mobile devices prevent videos from being played automatically, this is why it's not playing with your code. As you say, those devices require an user interaction to first play the video.
We have a UIWebView that load html page including video tag. When the user tap the video element, a fullscreen movie player is presented.
As there is some logic in the web page that handle events and need to stop and close the movie player. Is there any API to do so (stop the web movie player and exit fullscreen)?
Any one know how to do this?
Further more, even we want to detect tapping on the video element, then we'll have to provide our own custom player, instead of the system web player. Any way to do it?
Thank you!
This might be helping, if you want to controll the HTML5 video with js: http://www.w3.org/2010/05/video/mediaevents.html
I am not shure if - on a mobile device - javascript will be running while the video is in fullscreen mode.
I'm developing an iOS iPad app with an embedded YouTube video.
I'm having issues when the user tries to play the video touching the red square play image from YouTube, it seems that pressing that image won't trigger the play action. However, touching anywhere outside the red square play button works.
I've tested it with the iPad user agent with same results.
When embedding with controls:0 it seems that the action triggers perfectly, but I need the default controls.
Is there anyway to keep controls:1 and detect that touch to successfully play the video?
Try playing the video itself when it is loaded. If hitting the big red button is not a compulsion add "event.target.playVideo();" to the onReady function in the embeded HTML body. I have done so and the player in my application shows the big red button and starts the video itself immediately. I have used the following YouTube iFrame library youtube-ios-player-helper
I searched for it a lot but don't have a reasonable answer.How to play video from stream link or youtube link on webview android.i used tag video or iframe but occur some bugs:
-when click full screen video 'll stop and can't play again.
-when click back button for finish fragment,that contain webview,video still playing
Please see the "HTML5 Video support" section at http://developer.android.com/reference/android/webkit/WebView.html for some methods that you must implement.
When the video continues playing after finishing the fragment, are you destroying the WebView?