Possible to hide Play button on iphone for video when responsive? - javascript

http://preview.oklerthemes.com/porto/3.7.0/index-5.html
If you check this website, it has a video in the background that plays automatically. However, when you browse the page on a mobile device, for example iphone, the playbutton appears in the background.
is there a way to hide the playbutton when you browse the site on a mobile? and use an image instead perhaps??
Appreciate for any answers.

No, there are such means to hide button while playing video.
The code associated with the iphone are locked and it cant be modified by user

Related

How to use picture in picture mode for a button

We all know that by picture in picture mode we can pop out the video and that video will be on the top always, can we do this for a button also?
I am making a web project in which I want to pop out a button for the user and this button should be on top always, it should not go back to any other window, when we work on any other window.
So, do anyone have any idea how can i do it by html, css and javascript.
No, this is not possible. PIP is only supported on video elements, and even then, browser support is close to none https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API. Android devices have an API called "bubbles" that does basically what you want, but it's for native apps, not web pages https://developer.android.com/guide/topics/ui/bubbles.

How does youtube web prevent playing from control center on safari iOS

I was trying to stop a video on Safari for iOS, when the browser goes in background. I was able to do that through Page Visibility API.
On iOS's home screen, if I open the Control Center and press play button, it normally plays the last Safari's content.
What I'm trying to achieve is a Youtube Web mobile-like behavior: it is able to prevent this behavior. If you close Safari with a tab running Youtube, you are not able to press play in the control center and play the content.
I've already tried e.preventDefault() behavior on event.
I've tried to insert flags in pageshow/pagehide (as I found in another SOW answer, but these events seems to not being called on background running.
Also, I wasn't able to control that through the Page Visibility API and inserting flags in it's callbacks: even if events gets called when going in background, "overriding" HTMLMediaElement.play() does not work and the problem concerns iOS's Control Center.
It is like it does not use HTMLMediaElement.play()...
Does anyone have a clue on how to override Control Center's "Play button" behavior from web? Thank you.
It seems like Youtube fully unloads the content when the browser goes on the background and reloads the content starting at the point the user "interrupted".
I decided to follow the same way.
Moreover, the same iOS behavior seems to happen also on Android notification center (when Chrome shows you a tab is reproducing audio).

Add play button to toolbar

I have recently seen a play button in the tab menu which triggers an action in that page. (When opening a youtube video in a new tab)
Here is a picture of it:
Does anyone know how to add such a button?
(Picture made in Firefox Developer Edition - 57.0b13)
That is a browser feature, you can't "add" it, but it will automatically be displayed when you have an audio or video element on your site that is playing sound, giving users the possibility to mute and unmute sound for the specific tab.
You don't have to implement the icon by yourself. Chrome or any other modern browser automatically displays that icon when that specific tab makes a sound.
But if you want to implement a button by yourself,
You would want to alter the 'title' of the page with a Unicode icon when you start playing a sound. Not very practical method though.

<cfmediaplayer> how to pause the player through javascript calls?

I'm implementing the Coldfusion <cfmediaplayer> tag for playing flash videos on a touch-screen based local web application. I am aware that by default the user is able to simply tap the video itself to pause/play the video.
I am also aware that <cfmediaplayer> has a built-in control panel through the use of the controlbar="true" attribute, but the problem is the buttons are way too small for a touchscreen and I don't want the user to be able to access any other controls.
To combat this, I disabled the controlbar and tried to add a custom play/pause button below the player to essentially mimic the actions of touching the video itself. My problem is that I cannot find a way to simply pause the video... the only Javascript functions I could find are:
ColdFusion.Mediaplayer.stopPlay and ColdFusion.Mediaplayer.startPlay
The issue is that ColdFusion.Mediaplayer.stopPlay restarts the video from the beginning and not from where the video currently is.
Is there any way around this? As a last resort I will simply stick the play/pause button in the corner of the video to hint to the user that they can touch the video screen to enable those actions, but I'd rather have a separate button so as not to obstruct the user...
Thanks in advance.
Thanks to #Miguel-F for his help.
We have figured out that <cfmediaplayer> does NOT have pausing functionality by default, and only has the ability to Play or Stop the video entirely and restart from the beginning of the clip.
Looks like workarounds are required (or other methods of showing the videos entirely).

FlexSlider - Execute "next" action

I'm currently developing a responsive website using flexslider. The address of the test version is here:
http://residentsecurity.daniel-lucas.com/
When the site shrinks down to tablet / mobile version an icon appears showing the user that by sliding their finger on the slider they can go to the next/previous image.
I've tried turning this icon into a link so that if the user clicks on it, it will go to the next slide.
I thought that by inserting
Next
the script for flexslider would use the link to go to the next slide but it's not working.
Does anyone know how to turn make this link work with flexslider?
Thanks in advance
I never found an answer to this question but instead modified the css of the next button that already exists to adapt it to my needs on mobile phones.

Categories