putting button or UIView on top of video

Question

Is it possible to use uibutton/uiview on top of video? basically, i want to have a screen(UIVIew) with buttons on top of it. so, video would play as it is and user can perform action with buttons/uiview

My video file is in mov format

please post image where u want to put button – Rushabh Dec 05 '13 at 05:59 — Rushabh, Dec 05 '13 at 05:59
set the frame of your movie controller – Rushabh Dec 05 '13 at 06:00 — Rushabh, Dec 05 '13 at 06:00

score 2 · Accepted Answer · answered Dec 05 '13 at 06:29

Try with this...

 - (void)playVideoInLoopMode:(BOOL)loop 
 {
    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"myvideo" ofType:@"m4v"]];

    MPMoviePlayerController *mp = [[MPMoviePlayerController alloc] initWithContentURL:url];
    mp.controlStyle = MPMovieControlStyleNone;

    if (loop) 
    {
        mp.repeatMode = MPMovieRepeatModeOne;        
    }

    mp.view.frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, self.view.bounds.size.height);
    self.player = mp;
    [self.view addSubview:self.player.view];
    image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myimage.png"]];
    image.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    [self.player addSubview:image];
    [self.player prepareToPlay];
    [self.player play];
 }

score 0 · Answer 2 · answered Dec 05 '13 at 06:11

0

Try [player.view addSubview:button] where player is MPMoviePlayerController instance.

answered Dec 05 '13 at 06:11

Dinesh

929
7
25

score 0 · Answer 3 · answered Jan 22 '16 at 04:33

You can try this:

Video place a mp4 file video.mp4

CSS style.css

 #video{ position: relative; }

.myButtons a{  position: absolute; right: 10px;
    border: 1px solid blue; display: block; background: #FFF; 
    z-index: 2147483647;
}

HTML/PHP index.php

<!DOCTYPE HTML>

<html>
    <head>
        <title>Title Here</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
        <script src="js.js"></script>
        <link rel="stylesheet" href="style.css" />
        <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
    </head>
    <body>
<div id="video">

   <video width="100%" src="video.mp4" controls></video><br><br/>
       <div class="myButtons">
         <?php
            $i=1;
            echo "<a href=\"#\" style=\"top:0px\">btn-primary</a>";
            $j = 30*$i;
            echo "<a href=\"#\" style=\"top:$j"."px\">btn-primary</a>";
            $j = 30*++$i;
            echo "<a href=\"#\" style=\"top:$j"."px\">btn-primary</a>";
            $j = 30*++$i;
            echo "<a href=\"#\" style=\"top:$j"."px\">btn-primary</a>";
         ?>

       </div>
</div>
    <style>
button{
display: block;
margin-top: 10px;
}
</style>
    </body>
</html>

The only problem I am facing is that on mobiles when full screen happens, buttons disappear... Anyone with a solution for iOS/Android?

Next test to perform would be doing it with jwPlayer, will keep you updated.

putting button or UIView on top of video

3 Answers3