Rectangle 27 1

(function($) {
    $(document).ready(function() {
        setTimeout(
            function() {
                $(".active .owl-video-play-icon").trigger("click");
            }, 1000);
    });
    $(document).on('click', '.owl-dot', function() {
        if ($('.owl-item.active').hasClass('owl-video-playing')) {} else {
            setTimeout(
                function() {
                    $(".active .owl-video-play-icon").trigger("click");
                }, 1000);
        }
    });
})(jQuery);

youtube - Full browser width video autoplay with Owl Carousel 2 - Stac...

video youtube vimeo autoplay owl-carousel
Rectangle 27 1

I'm doing a similar thing with OwlCarousel 2 and this was my fix for it.

$('.owl-carousel').owlCarousel({       
   onInitialized:theThing,       
  });
function theThing(event){
  alert("")
  $(".active .owl-video-play-icon").trigger("click")
};

I'm triggering the click function on a callback once Owl initializes, so that the video will appear and begin to play on start.

youtube - Full browser width video autoplay with Owl Carousel 2 - Stac...

video youtube vimeo autoplay owl-carousel
Rectangle 27 4

By default Magnific Popup supports only one type of URL for each service so I extent it for support almost every video URL type of YouTube/Vimeo:

$('.my-selector').magnificPopup({
    type: 'iframe',
    iframe: {
        patterns: {
            youtube: {
                index: 'youtube.com/', 
                id: function(url) {        
                    var m = url.match(/[\\?\\&]v=([^\\?\\&]+)/);
                    if ( !m || !m[1] ) return null;
                    return m[1];
                },
                src: '//www.youtube.com/embed/%id%?autoplay=1'
            },
            vimeo: {
                index: 'vimeo.com/', 
                id: function(url) {        
                    var m = url.match(/(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/);
                    if ( !m || !m[5] ) return null;
                    return m[5];
                },
                src: '//player.vimeo.com/video/%id%?autoplay=1'
            }
        }
    }
});
iframe
type

jquery - How to embed youtube video in magnific popup? - Stack Overflo...

jquery css html5 wordpress magnific-popup
Rectangle 27 0

If you're familiar with jQuery, I wrote a plugin which simplifies controlling a Vimeo video with standard jQuery notation.

$("#yourvideo").play();

javascript - Autoplay Vimeo video on click in modal - Stack Overflow

javascript jquery vimeo vimeo-api
Rectangle 27 0

There are two ways you could fix this:

  • Wait to write the iframe into the lightbox until right when the user clicks to open it.
  • Remove autoplay from the iframe src and use the play() function to start playback when the lightbox opens.

vimeo - autoplay video issue - Stack Overflow

video vimeo autoplay vimeo-player
Rectangle 27 0

I'm doing a similar thing with OwlCarousel 2 and this was my fix for it.

$('.owl-carousel').owlCarousel({       
   onInitialized:theThing,       
  });
function theThing(event){
  alert("")
  $(".active .owl-video-play-icon").trigger("click")
};

I'm triggering the click function on a callback once Owl initializes, so that the video will appear and begin to play on start.

youtube - Full browser width video autoplay with Owl Carousel 2 - Stac...

video youtube vimeo autoplay owl-carousel
Rectangle 27 0

This google products thread says to clear your chrome history and cache and then end all chrome processes in your task manager. if you can't load the video after that, uninstall chrome and reinstall. It could also potentially be one of your extensions.

firefox - Vimeo video autoplay doesn't work in google chrome. - Stack ...

google-chrome firefox iframe vimeo
Rectangle 27 0

autoplay

It's, for instance, possible to "trick" iOS into thinking that the user clicked the play button (Google it, if you want to know how).

However, Vimeo would have to implement this since you won't be able to manipulate the contents of an iframe from an external source.

(For the curious, I did some digging in the source of the embed player via remote debugging in Safari and wasn't able to find a way to get the video to play without tapping the play button)

jquery - I can't autoplay vimeo video (mobile) - Stack Overflow

jquery html5 dom vimeo
Rectangle 27 0

My first answer to the question is a less than ideal brute force method. I'd suggest looking at my second method using the Vimeo Javascript API and froogaloop.

I'm going to assume you're using the Vimeo iframe inside a html page and that you're using this page inside a UIWebView inside an iOS app or inside Safari.

A little bit on introspection into the Vimeo iframe shows that it doesn't load the html video tag initially. You're going to have to programatically tap the 'play' button for it to load the video.

In order to do that today (April 2013, it may change) you can just grab the right elements and call the right functions. It's best demonstrated with some working sample code.

// You are loading this page inside a UIWebView
<html>
<head></head>
<body>
    <iframe width="" height="" src="http://player.vimeo.com/video/62207569 " frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <script>
    // Add a listener for the window's load event
    window.addEventListener('load', onWindowLoad, false);

    function onWindowLoad(event) {
        //use a loop to continue checking the vimeo iframe for the 'play' button
        checkForTrue(isIframeButtonLoaded, iFrameButtonLoaded);
    }

    function checkForTrue(func, callback) {
        setTimeout(function() {
            if (func()) {
                callback( iFrameButton() );
            } else {
                checkForTrue(func, callback);
            };
        }, 1000);
    }

    //finds the 'play' button within the Vimeo iframe
    function iFrameButton() {
                    //window.frames[0].document.getElementsByTagName('div')[1]; // this also works...
        return window.frames[0].document.getElementsByTagName('button')[5];
    }

    //simple boolean condition to check for the iframe button
    function isIframeButtonLoaded() {
        return ( iFrameButton() != null );
    }

    //once the button is loaded, click it
    function iFrameButtonLoaded(iFrameButton) {
        iFrameButton.click();
    }

    </script>
</body>
</html>

A sane person may say this is not the best way to do it, but for the purpose of automatically playing a vimeo video within your iOS app it does seem to work.

The code to load the html file from your bundle and load it into a UIWebView is boilerplate:

- (void)viewDidLoad
{
    [super viewDidLoad];
    NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"VimeoTrial" ofType:@"html"];
    NSString *htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];

    [self.webView loadHTMLString:htmlString baseURL:nil];
}

hi, thanks for your reply :) It seems to work, but I do have two problems with this solution: 1. As you mentioned, this is not the best approach, I prefer an answer that handle this issue using the official Vimeo JS API. Things like the button layout can change with time and break my code. 2. When I tap to play, the play botton is shown for a few secondes and only then the spinner starts. I try to change the 1000 value in 'setTimeout' but it doesn't help. I want that the spinner will begin the second I tap the play button (or at least that the play button wont be visible after tapping it)

According to the JS API there is a 'play' method you can send to the player (See API Reference). I'll update my answer when I have a chance. developer.vimeo.com/player/js-api

Your code is not working in my case. Can you help me a bit? @Jessedc

javascript - Objective c - How to autoplay Vimeo videos using JS - Sta...

javascript iphone ios objective-c vimeo
Rectangle 27 0

Loading a file locally or via a HTML string won't work due to the Same Origin Policy enforced by the web browser.

The iframe is unable to propagate it's postEvent() calls back to the main window because the Vimeo iframe is being accessed via the http:// protocol and the local file is via the file:// protocol. The 'ready' event is sent via this mechanism.

It's possible to use the Vimeo API in this instance but in order to automatically play the video you need to know when the iframe has loaded but the "ready" event is sent from the iframe up to the window via postEvent.

The fact that it's using postEvent is is made clear by the code provided in the Vimeo API Documentation. Froogaloop also uses the same code

window.addEventListener('message', onMessageReceived, false);

If you run the most basic example of the Vimeo API in an HTML file on your machine Google Chrome will throw a descriptive message: (Safari does not show this)

Unsafe JavaScript attempt to access frame with URL file:///...index.html from frame with URL http://player.vimeo.com... The frame requesting access has a protocol of 'http', the frame being accessed has a protocol of 'file'. Protocols must match.

<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<script>    
  var player = $f(document.getElementById('player'));
  player.addEvent('ready', function() { 
  player.api('play');
});
</script>

The proper solution is to host the HTML page on a remote service that has the same protocol as the Vimeo iframe. In this case anything from a http:// address.

If you load the above from http://(insert your host here) it works instantly in the iOS simulator, Safari and Google chrome.

If you wanted to do more on device, you'd have to merge the two answers I've given; Poll the iframe until you deem it ready, then tell the player object to play.

have you seen my solution for same problem with youtube videos? stackoverflow.com/questions/15717754 can't I use the same approche with vimeo?

The answers you're pointing at don't hint at how you would get Vimeo videos to work the same way. By looking at the two APIs it's clear they operate completely differently. The YouTube iframe API creates the iframe element on the page, whereas the Vimeo API is embedded in the iframe itself. Youtube no doubt binds a handful of events with javascript directly through to the iframe (similar to the deep diving in my first answer), and Vimeo only uses the standard postEvent() method.

javascript - Objective c - How to autoplay Vimeo videos using JS - Sta...

javascript iphone ios objective-c vimeo
Rectangle 27 0

The autoplay URL parameter doesn't work in Mobile Safari either. I'm thinking you may be out of luck unless you can get a URL for a direct stream. But in that case you could use the AVPlayer instead of a web view and have all of the flexibility you need.

Here is an interesting discussion about the vimeo direct link URLs: How can I find download links for vimeo videos? . However, according to that, vimeo doesn't allow that technique so you might want to take a look a the developer APIs here: https://developer.vimeo.com

ios - How to make vimeo video autoplay on iPhone/iPad? - Stack Overflo...

iphone ios ipad embed
Rectangle 27 0

To autoplay, go into your vimeo settings and you can pick it to autoplay through that (it also gives you an embed code if you prefer it that way). For looping, vimeo itself doesn't allow it but I too am looking for a looped vimeo, so let me know if you find it!

jquery - How do I add content and autoplay/loop Vimeo videos in Colorb...

jquery colorbox
Rectangle 27 0

To set a video to the browser's full width and height you could add this to your css and give the video the id 'videoID':

#videoID{
min-width: 100%;
min-height: 100%;
position: absolute;
}

this will make any video on your page have a minimum width and height of 100% of your video, and make it stay where it is.

edit: to have a video autoplay when you reach the slide, you could always make a variabel using jquery or javascript, whenever the slide to the right is pressed you could make the variable one higher for examle:

var counter = 0;

$(#slider).on('click', function(){
counter++;
});

you are now able to check the counter as follows:

if (counter == 1){
    $('sliderright').on('click', function(){
        $document.getElementById('video').play();
    });
};

it may not be the best way, but I believe it could work.

youtube - Full browser width video autoplay with Owl Carousel 2 - Stac...

video youtube vimeo autoplay owl-carousel
Rectangle 27 0

HTML5 can support videos directly.

<video controls autoplay style="whatever css styles you fancy go here.">
  <source src="yourvideo.mp4" type="video/ogg">
  Your browser does not support HTML 5.
</video>

That's pretty much it. It will not however work with older browsers.

I wouldn't do this, because it will use up your bandwidth and put unnecssary stress on your server. Otherwise, fine. E.g. if you have a high-end dedicated server and you're not expecting to get a surge of users at any one point in time, then it should be fine. Otherwise, you're better off hosting externally.

Another benefit of hosting on Vimeo is that it does all the donkey-work for you in terms of getting a responsive video container and making sure it works with the maximum number of devices possible.

There is no wrong way of doing it - It just depends on what you're trying to achieve, what your server is capable of, and what your users are like.

thank you for your answer. I think I shall stick with vimeo then however is there any way other than paying to get out of having the outro? Maybe a loop? Or can I disable the video near the end?

You can loop vimeo videos. Click here - however, removing the outro completely requires a paid account.

html - Implementing a Video via iframe, vimeo or self hosted? - Stack ...

html css iframe video vimeo
Rectangle 27 0

To set a video to the browser's full width and height you could add this to your css and give the video the id 'videoID':

#videoID{
min-width: 100%;
min-height: 100%;
position: absolute;
}

this will make any video on your page have a minimum width and height of 100% of your video, and make it stay where it is.

edit: to have a video autoplay when you reach the slide, you could always make a variabel using jquery or javascript, whenever the slide to the right is pressed you could make the variable one higher for examle:

var counter = 0;

$(#slider).on('click', function(){
counter++;
});

you are now able to check the counter as follows:

if (counter == 1){
    $('sliderright').on('click', function(){
        $document.getElementById('video').play();
    });
};

it may not be the best way, but I believe it could work.

youtube - Full browser width video autoplay with Owl Carousel 2 - Stac...

video youtube vimeo autoplay owl-carousel
Rectangle 27 0

I'm assuming that you want the audio played inside a web page instead of directly. I am not sure the following will help, but I have hit similar situations when I do not control the HTML (i.e. loaded from some third party site), and I still need to control its behavior on launch. For example, Vimeo appears (at this point) to ignore the "autoplay" uri parameter in the instant version of WebView. So, to get a video to play when the page loads I employed the patented 'insert arms approximately up to the elbows' approach. In your case, hiding a tag (per the post you cite above), and then simulating a click has the benefit of not instrumenting the page before the WebView has completely loaded. Then, you inject JS code (Which is adopted from here: In Android Webview, am I able to modify a webpage's DOM?):

mWebView.setWebViewClient(new CustomVimeoViewClient(){

            @Override
            public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                    String injection = injectPageMonitor();
                    if(injection != null) {
                        Log.d(TAG, "  Injecting . . .");
                        view.loadUrl(injection);
                    }
                    Log.d(TAG, "Page is loaded");
            }
    }

Using either direct JS, or else simulating clicks, you can instrument your page. Loading jQuery seems a bit ham-fisted for just one little tag location, so perhaps you might use the following (Which is shamelessly lifted from here How to Get Element By Class in JavaScript?):

private String injectPageMonitor() {
    return( "javascript:" +
        "function eventFire(el, etype){ if (el.fireEvent) { (el.fireEvent('on' + etype)); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); }}" +
        "eventFire(document.querySelectorAll('.some_class_or_another')[0], 'click');";
    }

And as long as I am already telling you embarrassing things, I will round out by confessing that I use Chrome to poke around in third-party pages to find things I want to instrument in this way. Since there are no developer tools on Android (yet), I adjust the UserAgent, described here http://www.technipages.com/google-chrome-change-user-agent-string.html. I then procure coffee (the liquid, not the Rails Gem), and poke about in other people's code causing mischief.

Thank you Ted for the reply. I've thought about workarounds like creating and controlling my own MediaPlayer when the page loads to provide the background sound, and hiding/disguising <a> anchor tags via CSS to play "on click" triggered sounds using the technique described here: stackoverflow.com/questions/10966245/ ... continued ...

but before travelling down the ugly workaround route, I'd first really like to know if there is something fundamentally wrong/missing in what I've done in my test example or if Android hasn't yet properly implemented <audio> tags for playing locally stored audio files. It seems to be a rather mature product to not do so when the Chrome browser on which I assume WebView is based handles local audio quite handily, as does it's closest rival in iPhone. Also the browser app on my phone handles audio like that demonstrated here: w3schools.com/html5/tryit.asp?filename=tryhtml5_audio

Finally, it seems someone else here has run into the same problem without resolution: stackoverflow.com/questions/9162022/

No argument here. . . this solution is about like the sandwich I dropped on the floor of my car (hairy and unappetizing). I also agree with your comment that you should be able to do it. As of 4.1, however, there are still some oddments that seem to suggest otherwise. For example, if you play an HTML5 video stream, and then destroy the WebView containing it, the MediaPlayer attached to the stream continues to buffer the stream, and won't release the sockets. Where a desktop browser will tidy up when a view is destroyed (e.g. Chrome on OSX), the Chrome Client in 4.1 appears to not do that.

Ergo, even if you tackle getting it to play on launch, you may need to pay attention to stopping the train on exit. Most "universal" players that stream HTML5/mp4/h.264 (using these as approximate synonyms here), have 'stop' and 'unload' (though, again, 4.1's Chrome client doesn't pay attention to 'unload'). So, you may need to 'stop' the stream during the 'onStop' callback of your activity (and, perhaps 'onPause' if the 'isFinishing()' is set, depending on your desired behavior). I'm guessing that there is a non-hairy way to 'properly' start the stream. Stopping the stream is another matter.

Android 4.0.4 WebView MediaPlayer Error (1, -2147483648) Using

android audio webview media-player assets