i'm developing an html page using jQueryfullPage.js, inside this page i integrated like 17 videos in 17 different sections, these are youtube iframes with data-autoplay attribute. Everything is working fine, the videos are only playing when we are on(viewport) the section containing the video, except that there are specific sections that the videos are auto playing on page load even when we aren't on the section containing this video. there are 3/17 videos that are playing automatically, but the rest of them are working properly. Any help? Thanks in Advance.
From the fullPage.js docs:
Using the attribute autoplay for videos or audio, or the param autoplay=1 for youtube iframes will result in the media element playing on page load. In order to play it on section/slide load use instead the attribute data-autoplay.
Make sure they don't contain autoplay=1 in the video URL.
Related
I want to embed a youtube video on my own website and I want this youtube video not to be skipped in any way, but not to adjust its speed and to track the time it watches, but I could not find any source.
I tried to use the youtube iframe api, but I can't follow the stats without stopping or starting the youtube video there.
I would suggest that you should first download the video, and then put it onto your site through a <video> tag. The youtube iframe api is designed only for having videos that function exactly like they do on the youtube website, which includes the things you don't want.
There are a lot pages like Youtube starting their videos with sound on load:
https://www.arte.tv/de/videos/091148-000-A/forschung-fake-und-faule-tricks/
Sound should be only allowed after click, whitelisting or if multiple videos on the page have been viewed before. This is not needed here.
What is the difference between these pages and a simple HTML5 Video element using autoplay attribute or Javascript videoElement.play()?
In case you are using Chrome there is another thing which influences if a page can autoplay media or not. It's the Media Engagement Index. It's basically a number which is larger if you used to play media on that particular page before. If it's large enough the page is allowed to autoplay.
I'm using videojs-youtube plugin to play embedded youtube videos inside my web-app. Recently I have noticed that when the web-app is being wrapped inside an iframe, the video gets stuck on infinite loading. The console doesn't show any related errors due this process.
While trying to debug this problem I realised that the PlayerStatus (as described in IFrame Player API) is being changed in a wrong way:
When the video isn't wrapped in iframe the PlayerStatus changes from 'unstarted' to 'buffering' and to 'playing'. On the other hand, When the video is being wrapped in iframe the PlayerStatus changes from 'unstarted' to 'buffering' to 'unstarted' once again.
And there is one weird exception though - when chrome extensions such as AdBlock or LastPass are installed and activate, the video plays properly, even if its inside an iframe.
Any idea why is this happening?
Thanks :)
I had the same issue but I think I've found a solution for my problem after hours of trying... Adding allow="autoplay" to the iframe fixes it for me, it doesn't make total sense since sometimes it does work without adding this.
To clarify, I'm using video.js and videojs-youtube.js in an iframe, inside that iframe, if you play a Youtube video, another iframe is created inside the iframe. And I'm guessing that clicking on the video player to play Youtube video isn't considered user interacting with the inner iframe, because videojs-youtube programmatically tells youtube video to play in that inner iframe, and Chrome doesn't allow video inside an iframe to be played unless user has interacted with it.
This doesn't explain why 5 percent of the time it does play fine. Anyways, adding allow=autoplay to the outer iframe tag that contains the videojs player makes it work 100 percent of the time for me.
I am using Lity.js to have a brightcove video link pop up in the modal window. My issue is the video is not auto playing, is there a working parameter that can used to say add to this link
https://players.brightcove.net/1534342432001/ByfGnkzB_default/index.html?videoId=5806346414001
So it can auto play, nothing i have tried works
looking on BrightCove's website, it seems you can add an &autoplay option at the end of your url. This worked for me in Microsoft Edge and Firefox. However, Chrome does disable this feature. The only way you could get this to work in Chrome is to also mute the video by adding &muted to the end of the url like this. Hope this helps!
https://players.brightcove.net/1534342432001/ByfGnkzB_default/index.html?videoId=5806346414001&autoplay&muted
Also, here is the link to BrightCove's available query parameters:
https://support.brightcove.com/available-query-parameters-standard-iframe-embed-code#bc-ipnav-1
You can add an id to brightcove video tag and call the play function as added in the script
videojs('videoId').play(); //'videoId' will be the id given to player video tag
Bit curios about the possibility to embed a custom HTML5 video player into Tumblr.
How it works now is basically that you put in an URL or embed code to Youtube or any other service and it'll load up the video and show it in the dashboard feed and on your blog.
I just checked with Vimeo, and in that case it seems like it fetches a vimeo iframe with the video (I guess it's their embed code) and inject it into the DOM when the play button is pressed.
Would it be possible to mimic this behaviour with a custom iframe of my own? Make Tumblr accept my own embed code (iframe based) that leads to a HTMl5 video and also serve up a preview image before the video is actually played.
So when I'd input for example, www.mydomain.com/video1 it would recognize it as a video and have it behave like any other video service out there.
Or would it otherwise be possible to do via their API?
Just to clarify: I would not want to use the Tumblr HTML5 video player, but a player of my own chosing.
The Tumblr dashboard will only play video previews for Video Posts. Anything embed in a caption or body will not get the preview treatment.
AFAIK, the only way to get a custom video to have a preview would be for Tumblr to work with your own platform / API. Tumblr pulls in the preview thumbs when you make the Video Post, if they support the platform.
There is a list of tested video platforms / providers here: Video Posts with Auto Thumbnail(Like in Facebook) in Tumblr.com
OK
So on this tumblr the 3 posts along the top are ones I have tried.
http://nativecitizenstest.tumblr.com/
First is a Video type post but simply passing the url to tumblr.
Second is a text post but passing custom embed html from vine (this included a script which I did not know would work).
Third is a text post with an iframe in that I hand coded.
I think metcalf seems to be flash video and I don't know if that is supported, but a little googling should tell us.