On my website there is a video which should autoplay. It does that on most devices, apart from, of course, iPhones. I'm using the WordPress cover widget (and WordPress beta 5.5) for the video.
When it doesn't autoplay on the iPhone, it shows an unclickable play button:
Image
How can I make this play button disappear, so that at least a static image shows?
Thanks!
If you know how to code in js(javascript) or knows somebody who does, you could remove the play button icon or even autoplay the video for iPhone.
helpful resources
https://developer.mozilla.org/en-US/docs/Learn
https://www.w3schools.com/js/default.asp
There is this handy npm package that can help its called react-player https://www.npmjs.com/package/react-player
it works with vanillajs to check out a fiddle of the example on the homepage
https://jsfiddle.net/o62snj3p/
Can you show your code? Videos should autoplay on all browsers. For mobile, you need to add the muted attribute.
Related
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
I am using Ionic on android devices, and there is a tag in the HTML page. When I pushed the fullscreen button to make the video presented in fullscreen mode, there is a obvious flicker in the area of the tag on the device.
During the flicker, I can see the wallpaper of the android phone and the icons of the apps on this device. Is this some issue with the native functions? And I also notice that when the keyboard hide/show a similar problem.
As you can see in the picture, when I am switching to the fullscreen, there is clearly a play button of the native player, after a second or so, the video will be playing.
here are some codes.
<div ng-click="play()" ng-show="showPlay" class="tutorial-play-button"><img src="images/welcomeNote/play.png"></img></div>
<video id='video-widget' autoplay='true' autobuffer controls playsinline poster="null" style="width:100%;">
<source src="{{src}}">
</video>
</div>
This issue is not because of your mentioned code in the post. It might be because you have not handled your out activity action/animation correctly. Same thing will happen even when you launch another activity. There might be snippet of code in your project that is altering default behaviour of activity. You should google Activity Transition and you might have your solution.
I hope this helps.
The cause is the Theme I use. I used a transparent theme in my app. I changed the theme to Theme.Light. It is OK.
To enable the autoplay of a video we just add the "autoplay" attribute to the video tag.
This doesn't work on mobile devices and browsers like Google Chrome, iPad, iPhone, the "play" method will not work until there is no user interaction with the touchscreen.
But in this link or this link, with a custom JavaScript player, they bypass this block, and the video autoplay on iPhone, iPad, Webkit Browsers and all Mobile Devices without user interaction.
How can i do it myself?
if at the load of the page i simulate touch events this might unlock the video "play" method?
i cloud load a video url only with canvas? without the video tag?
Please help and explain me.
There's a library which uses canvas to autoplay inline video on mobile. The downside is that there is no audio, since canvas originally wasn't intended for that.
The library basically loads all the frames and then shows them to you in a sequence. This brings along some limitations regarding the length of the video.
Beats gifs tho....
https://github.com/gka/canvid
I am embedding a youtube/vimeo video onto my site with an iframe.
<iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...></iframe>
The {$entity->getYouTubeVideoID()} bit is smarty template code syntax. I don't think that is the problem because the video uploads and plays fine in Chrome and IE9 and up. The video also uploads to firefox and safari fine, meaning I can see the video and it's the right one. But when I click the video it does not play in either firefox or safari.
What is interesting is that the other events are triggered. That is, on mouseover the play buttons on the videos change. On the youtube videos, the button in the middle with the play icon starts out as grey and on mouseover turns to red. So the iframe is registering events. But, it won't play on click. I have no idea where to go from here.
The only other event handlers I have on the iframe is this one but I doubt that is messing it up:
$(window).blur(function(){
if($('iframe').is(':focus')){
mySwipe.slide(mySwipe.getPos(), 1000);
}
});
(mySwipe refers to the swipe.js slideshow library)
I had an issue with playback buttons in firefox also. I was using a html5 Doctype, so I added the following after the youtube url
&html5=1
maybe this might help you.
I simply could not get embedded videos to play inside the swipe.js library (or any other touch enabled jquery library). My solution was to extract thumbnail images from vimeo/youtube APIs and use them as placeholders in the slideshow. Then register a click event on the thumbnail that opened the video in a lightbox.
I know this thread is six years old, but I recently had this problem and all of the solutions on the internet did not work. But I figured it out for my site:
If you have a secure site (HTTPS) and you embed a youtube video with the code posted here,
iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...
... Firefox will block it, because that is "Mixed content." HTTP is unsecure, so it is not allowed to show.
Youtube is an HTTPS site, so including that "s" in your URL will allow it to play in Firefox and IE without having to disable security.
Flexslider 2 basically solved it. Swipe.js is wonderful, but with playing youtube/vimeo in a slider Flexslider works better.
I'm looking to add some videos to my mobile webapp. For the best UX, I'd like to avoid having a simple static video-tag. (because its in an element which is webkit animated and video + webkit animations don't always play nicely together in my experience.)
Rather, I'd like to have an image (with a play icon on it) to "link" to the video. Mobile YouTube (as seen on iOS) have done this very nicely where when you click the image, the video seems to "pop" up to fullscreen and plays. How do they do this? Is it a link? A previously hidden video-tag? Some webkit-animation to do the "popping"?
I snooped around using Chrome Inspector (+user agent switcher to iphone4) but the videos don't play on the desktop browser, and the code overall looks quite complex..
Can you help?
What you can do is on-click of the video thumbnail, you can load the video url using the object/embed tags. In IOS, whenever a video starts playing it automatically plays it in fullscreen(feature of IOS itself)
I believe you can do something similar to this on certain browsers (e.g. WebKit.)