I've set up a Drupal website and would like to have video box that pops up when a user clicks a picture graphic. Sounds simple enough, but it turns out it is not straightforward in the land of Drupal, flash, codecs, and iphone...
Here's what I'd like:
User clicks a link on my Drupal website, a video box player pops up as a mini-box player for the user to watch in a PC or Mac.
For iphone users, want the ability for them to view video on iPhone (which means it can't be flash).
Here's where I am so far. I recorded a screencast using both Camtasia for Mac and Screenflow. But I don't know which format to encode the video- or how to.
I've read that JW player (long tail video) is a good player because it will play both flash and HTML (good for iPhone), but then also read that Drupal and JWplayer does do a popup video window from a link. Is that true?
So before embarking further, I'd love some input on how to proceed? Which encoding format, how to achieve pop-up video player, and have ability to play on iPhone. Of course all through a Drupal site. Btw- I would be hosting the video on Vimeo, or Amazon's cloudfront.
Thanks!
If you use the vimeo iframe code for embedding the video, you get iPhone playability for free.
Related
We are developing a mobile application (using ionic framework, jquery) and thinking to let our users to share videos from vimeo, youtube etc. in this case we are integrating vimeo video link in iframe. Below are challenges:
Not able to play vimeo videos inline in our application:
on iPhone device when we play vimeo video from our ionic application it opens in a native video player, on the contrary we want to play it inline in our application itself
in case of Youtube video its supported and works well. They have provide Playsinline property to support it.
As per vimeo developers documentation, we have not found any similar video player property to allow inline video rendering
Is there any workaround that you suggest to play vimeo video inline inside application?
Play, seek & load progress events are not supported in mobile application
As per your developers page, play, seek, load progress etc events are not supported in mobile application
Is there any workaround to enable these events on our mobile application
Yes, I know there are limitations that vimeo has declared but can someone provide me if there are any workarounds? Your response to our queries is very much important for us.
Reference:
https://developers.google.com/youtube/player_parameters
https://developer.vimeo.com/player/js-api#event-compatibility
try adding background=1 to your embed code
<iframe id="player1" src="https://player.vimeo.com/video/[video id]?api=1&player_id=player1&background=1" width="630" height="354" frameborder="0"></iframe>
This wil not work in browsers which revert to the flashplayer.
I don't know if you'll have javascript API functionallity.
This will remove all controls aswell. What I've read, it's still in an experimental fase, but hope it works for you.
I have seen several sites where they are able to create links to videos and they actually open on the video player of the iPhone, iPad or iPod.
This is obviously not a flash player video, and they don't seem to be embedded from youtube.
So I was wondering how can I add a video on my site that can be opened on an iPhone, and also what type of format is required for this?
Thanks
HTML5 Video works on iOS devices, see http://html5video.org
and here is a decent player plugin
http://videojs.org
I am building a website: daretogaincontrol.com. On that site, I am using videolightbox to play videos.
The videos don't play on iPad or iPhone. The site works fine on desktops (Mac and PC).
The nice people at videolightbox put together a little test page to show that their player and one of our videos will play on iPad/iPhone here: http://www.videolightbox.com/3/
I copied that code to a test page here: http://www.daretogaincontrol.com/test_video
On the test_video page there are two play options one is playing the video from videolightbox.com with the player from that site. Same as the videolightbox.com page, but served from the daretogaincontrol server. The bottom one attempts to play the same video with the same player but the player and video reside on the daretogaincontrol server.
All the javascript and css on the test_video page are linked to the videolightbox.com site.
Neither video on the test_video page plays on iPad/iPhone, which leads me to believe there might be a server issue, since I can eliminate (?) the video format and player has having identifiable problems.
You can play the video on iPad/iPhone using a direct link: [which you need to figure out on your own because I am limited to 2 links per post, sorry], but not in the player on the page.
I have no iPad/iPhone to test with. I know pretty much nothing about iPad/iPhone. I must make changes and call the client to have them test. I also have little experience with delivering video content over the web.
By using these instructions you can set up your PC to act as a proxy and capture the web traffic.
When I do this, I see the requests are malformed when coming from the iPhone
GET http://www.daretogaincontrol.com/test_video
200 OK (text/html)
GET http://www.daretogaincontrol.com/videos/index_videolb/http://www.daretogaincontrol.com/videos/having_fun.mp4
404 Not Found (text/html)
GET http://www.daretogaincontrol.com/videos/index_videolb/http://www.daretogaincontrol.com/videos/having_fun.mp4
404 Not Found (text/html)
I have been doing some research into what is possible, as far as I can tell
Autoplay
Possible to autostart videos on early versions of IOS http://www.codeblog.co/getting-autoplay-working-on-ios/ although this no longer works on current version (exact version it stopped working I don't know). Behaviour seems to be the same on both the iPad and iPhone?
Playing video in page
On the iPhone videos always pop out to player, its not possible to play in page.
However is possible to play videos in page on the iPad - have tried out the videos on here and they do play inline.
http://www.html5rocks.com/en/tutorials/video/basics/
Playing as intro video
May be able to do an enter now button for the site with below code to trigger
<input type="button" value="Play" onClick="document.myMovie.play()">
https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10
Could then on iPad make this take the full screen in page in website and use js to detect when the video finishes. Am thinking on iPhone may not be possible to detect when video finishes?
Can anyone clarify what is possible?
As much as I know intro video aren't too popular, this is a requirement for the site.
Automatic play is not possible on iOS as fas sa I'm aware. They removed support on purpose to stop people from doing it.
Any playback now requires the user to actually specify for the video to play, so providing a button to play it should be fine?
Can't you keep your video in the bundle and play it with MPMovieePlayer.Then you won't need to autoplay the video,the video will be played autometically itself.As I do the same thing.
i have built an iphone application which makes a video and than you can record the video further. now the main part or my application is that i want to upload it to youtube or e-mail it. now conventionally you take a video or picture for instance from the gallery and using the camera roll feature.
can i utilize that feature in my own application so that after i have recorded a video through my iphone application i dont have to go back to the camera roll feature which is there in the iphone built in gallery.
It doesn't look like you can get access to those features within your app.
You'll have to implement these features yourself.