Videoplayer in ion-content doesnt work. If ion-content is removed, it does work

ionic-v1
1

I embedded a simple video player in the side-menu example.
When I replace the default content with a video player, the controls of the video player don’t work(tested on Nexus 5).
When I remove the surrounding ion-content, the buttons do work, but I guess the ion-content should be there ?

2

Try wrapping it in a div with data-tap-diable="true"

<div data-tap-disable="true">
            <video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="http://player.vimeo.com/external/76336826.sd.mp4?s=dd361715fad172bf26ba0ad91635c4f9" type="video/mp4"/></video>
         </div>
3

Thanks for the answer. On the github issues somebody suggested to add overflow-scroll="true" to the ion-content. Do you any idea which of the two solutions is the best ?

Does this solution also works fort a list where the player is part of a list item and where all the items have a video player in them, and I want scrolling ?

Thanks !

4

@mhartington, hi, I am curently trying to play a video in my android app.

I am using Samsung S5.

I created a sample using above codepen sample and tried to play video in my device. But some how, I am not able to play video.

Any inputs on this please? did I miss some thing?

Also, adding data-tap-disabled=“true” doesnot solved my problem.

For testing, I removed ion-content and tried, I am able to play audio. But not video.

Now I am having two issues:

  1. When I remove, ion-content, i am able to acess audio only. What should be work around to embed inside ? Adding data-tap-disabled=“true” doesnot solved my problem.
  2. How can I able to play video with audio too?

@mhartington, @jvanaert any inputs please?

Thanks.

5

Any chance you could provide some code to see what you have?

6

@mhartington,
Sure, here is the code, I harcode video file. You might need to replace it. (all code is inside index.html/js)

https://onedrive.live.com/redir?resid=A2180ABB1995C4E2!1517

Thanks.

7

@mhartington

I have the following piece of code

<div data-tap-disable="true">
	<video style="width: 100%;" controls="controls" preload="metadata" webkit-playsinline="webkit-playsinline" >
		<source src="{{item.maincontent.theVideo}}" type="video/mp4"/>
	</video>
</div>

The above doesn’t seem to work in my case.

The video plays when I put overflow-scroll="true" on my ion-content but then I can’t scroll down to the lower items on the page.

1 Like
8

@mhartington this works fine but is there a way to make a youtube video work the same way. Please help!