I'm using vimeo player js API with froogaloop library for starting video when user clicks on the specific button on the site.
Here is how I embed video:
<iframe id="my_video" src="video_source?title=0&byline=0&portrait=0&color=fd735b&api=1&player_id=my_video" width="940" height="529" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
And here is how I use js API:
var iframe = $('#my_video')[0];
var player = $f(iframe);
player.addEvent('ready', function() {
$("#watch_video_wrapper").bind('click', function(){
$("html, body").animate({ scrollTop: $('#video_page').offset().top }, 3500);
player.api('play');
});
});
So when player is ready I bind 'click' event to the "Watch Video" parent container. It works on the desktops. But when I tried it on iPhone 3GS or iPad simulator video is not starting. Also I checked vimeo example on the site:
Example 1
Example 2
and they do not work on mobile devices too.
On mobile devices this API will work only after you have started video manually with play button in player. But if you load page, do not start video manually and try to play it with JS - it will not work.
Did anybody face with this problem? Or I'm doing something wrong?
I dont think its a vimeo issue - its related to IOS & Android's policies around not playing video without user interaction. See this answer : On iPhone, Vimeo Javascript API .play() function doesn't work until the video has been played
If you look right here it has a table of compatibilities. It looks like mobile with the play option is not supported.
https://developer.vimeo.com/player/js-api#function-compatibility
Vimeo only makes "mobile safe" versions of the movie if you have a "Vimeo Plus" account.
So if you don't have a plus account, the video will never be "ready" (= loaded).
Related
Update:
I did a fully build via Android studios, and the HTML5 Video does not work at all. It may be related to it targeting a web site? Though I can have the app open a website from the app directly, so maybe something else I am missing. I also tried with the video in the app directory, but again, it did not seem to load at all.
I am building a Cordova/Framework7 app that I need to embed videos into.
The video loads, and I can scroll back and forth through the video, but the giant PLAY button does not respond when touching it in app.
<video id='video' controls>
<source src="https://website.com/FancyVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video
</video>
I've tried to make an event listener to trigger the video (with and without the onload bi)
window.onload = function() {
var video = document.getElementById('video');
video.addEventListener('click', function () {
video.play();
}, false);
}
So I am not sure what to do, it should work.
I have followed several other question threads but none seem to work, or are mostly obsolete. I have also tried media plugins with similar results.
HTML5 element on Android
html5 videos not showing controls on android once loaded
Note:
I am using
PhoneGap desktop application, and a Galaxy S7 running Android 8.0.0
Cordova Android Version 7.1.0
Cordova Version 8.0.0
Framework 7 Version 3.0.1
PhoneGap Version 8.0.0
I'm using the following iframe in my HTML code:
<iframe src="<iframeurl>">?autoplay=1" frameborder="0" allowfullscreen></iframe>
On iPhone with iOS10 this doesn't autoplay. I'm getting the red play button and stuff. On windows chrome and others all works fine autoplay starts correctly. But not with the iphone.
Is there anything I could do in javascript or by manipulating the URL to make this autoplay? I'm aware that Apple used to disallow autoplay before iOS10 so maybe I'm doing something wrong here..
You're experiencing this because Apple doesn't allow embedded media to play automatically — the user always initiates playback.
This is mentioned in YouTube's IFrame Player API documentation as well. And no, I don't think you can and should override this since that is a bad practice.
Just add the play trigger to onClick and then execute call the click event from an AJAX response.
Should do the trick ;)
It is not that iOS prevents any video from autoplaying (at least not so since iOS 10), but it is unmuted videos that are prevented from playing without user interaction. So if you embed a YouTube video with muted=1 appended to the URL, autoplay works again.
P.S. the muted parameter is not documented for the YouTube embedded players. It is nowhere to be found in the official doc: https://developers.google.com/youtube/player_parameters. Yet it has been working for quite a while. If you worry it may not work someday, you can take the programmatic approach via the iframe API: first mute the video and then play it when the ready event is emitted.
putting this in config.xml worked for me:
<allow-navigation href="*://*youtube.com" />
I would like to embed a youtube video (with the standard iframe). Can I ensure that the video is played in the youtube app, if it is clicked on using a smartphone?
For completeness my video including code (using bootstrap 3.3.1.):
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo $Elem->video; ?>">
</iframe>
</div>
Thank you
I'm just trying to do the same thing and I can tell you that there is no native way to specify that behaviour as a parameter.
The only workaround (I'm still trying to implement it) is to use YouTube's Player API for iframe. I think you should use that API to embed the video on the webpage and add a listener to the first "play" event, in that event you should check if the user is using a mobile device (using another JS library to check that) and stop the playback (the stop() API call will also stop the loading of the video file) and then redirect the user to the video URL (like youtube.com/xxxxxx). At that time, at least in Android, the user will be asked to open the link in the browser or the YouTube app. I think most user have the app as the default option.
That's the idea, I'll try it and if it works will edit this response with the code I've used.
This is the link where you can read about embedding the player, it's events and API calls: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
YouTube iOS8 Media Load Issue - Media plays successfully while in Safari, but when the app is loaded from a Home Screen web clip, playing the video fails.
Moreover, tapping a link to navigate away from the page while the media is failing to load results in a complete crash of the app to the Home Screen.
Here is a link that demonstrates this (obviously run on your iDevice). You can run it initially in Safari browser, it'll work fine. Install it as a home screen icon, playing video will fail, and clicking the bottom link will crash the app.
http://nterspace.com/youtubeissue.html
The code that works when the app is loaded up in the Safari browser is:
<iframe width="100%" maxwidth="432" height="270" src="//www.youtube.com/embed/_j4KrMAygJI" frameborder="0" allowfullscreen></iframe>
Anyone have any thoughts? Is this bad embed code?
Today, April 09, 2015. Finally , this issue is partially resolved. After updating to version 8.3 my webapps returned to work again for the dailymotion and vimeo videos. Youtube videos are now redirecting to the native application, which is very annoying.
EDIT:
As the youtube videos was redirecting to the native application , I had to use the youtube url as follows:
<iframe width="100%" height="300" src="https://www.youtube-nocookie.com/embed/hdjL8WXjlGI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
So my users can watch the video without having to leave the webapp.
For some reason the nocookie option does not redirect. Let's hope that this will be completely fixed in the next iOS version.
I am having the same issues!
This is an issue particular to IOS8. Please see: https://discussions.apple.com/thread/6558443 Hopefully Apple will fix this issue soon. Another issue arising is unable to use Play button:
The Play button on a youtube embed does not work on android-chrome
UPDATE: They have fixed the PLAY button ISSUE!
It was still broken on 8.3 for me, but it turned out it was because there was an <input type="search"> element on the page (bizarre). Made a video: https://www.youtube.com/watch?v=rrKxAIXnydE
iOS 8.3 fixes the bug. Videos are now playable from homescreen webapp, including from appcache.
source:
Just tested this on iPad with IOS 8.1.3 - still broken.
sneuf's iframe works for safari pages but not when loaded from home screen (web clip).
Notified today that vimeo on chrome push the F11 button for you !
I haven't found any info on how it work but it's very cool.
I'm using mediaelement.js for now, is they planning to implement this ?
To try it open a video on vimeo, make sure you are in HTML5 (bottom right of post, on top right of the comments) and click "Switch to HTML5 player"
Play a video in a real fullscreen !
Chrome dev channel now comes with the fullscreen API
Sample usage:
<video width="300" src="movie.webm" controls></video>
<button onclick="enterFullscreen()">Get Huge!</button>
function enterFullscreen() {
var elem = document.querySelector('body');
elem.onwebkitfullscreenchange = function(e) {
console.log("Entered fullscreen!");
elem.onwebkitfullscreenchange = onFullscreenExit;
};
elem.webkitRequestFullScreen();
}
See this slide deck for usage, and here's a demo of the API in action.