Jump to a specific period of a video using PHP in HTML5

Question

I am not using Youtube but a video hosted on a remote web server. The link to this video is stored in my MySQL DB.

edit : The video can be opened on Firefox and can be seen : here .

My code is something like this :

<?php if(isset($sql) && count($sql) && ($sql->num_rows)) : ?>
<div class="reslt_bar">                
    <?php foreach ($sql as $key => $search_data) : ?>

        <?php
        //I have set the URL of the video and the timeframe in order to jump to it
        $Videolink = $search_data['VideoURL'];
        $VideoFRAMESeconds = $search_data['timestampe'];
        $intVideoFRAMESeconds = (int)$VideoFRAMESeconds;
        ?>

        //The Below line is the place were I would like to click and jump on a new page to the video specifi time
        <p><a target="_blank" href='<?=$search_data['site_url'] ?>'><?=$search_data['meta_title'] ?></a><br/>

    <?php endforeach; ?>                
</div>

I have looked at this SO thread which seems to be a good start, But I do not want to show the video on my page, I want to click on the link, this will open a new page and jump to the specific frame/period in the page of the video not on my first page.

Is this doable ? Do I have to load the video on the page to be able to jump to that period ? Since my code is written in PH, how do I add the command :

document.getElementById("video1").currentTime = 10;

I am a littel bit lost.. any clue ?

You'll more than likely need the `currentTime` JS HTML5 API method, calling it on your video element after the (new) page and video have loaded. If the that page also uses PHP, you could pass the video position in seconds via a GET variable like `/newpage.php?position=999` to that page and then output it to JS via a JS variable on the page: `var videoPosition = 999;` Or something like that :) — jonathanbell, Jun 10 '17 at 19:27
Sorry my English might not bee good. I want to load blank page with only the video , something like this : https://s3-api.dal-us-geo.objectstorage.softlayer.net/my-testou-bucket-1/SAMPLE_VIDEO.mp4 and go directly to let say time 50 — MouIdri, Jun 10 '17 at 19:30
How will the page know to start playing at 50 seconds? Or, 60 seconds? Or, some other value? You need to pass that data to it somehow. My suggestion is to use a PHP GET variable, like: `?position=50`. There are lots of other way to give this value to the new video page. That's just one way. The end result will be that you'll pass that value (50, in this case) to your JavaScipt and it will then know which position to start playing the video at. The JavaScript could accomplish this via the HTML5 `currentTime` method. — jonathanbell, Jun 10 '17 at 19:35
Ok.. I get that. But what the code would look like then ? I am a little bit lost on how to articulate the call and the script. — MouIdri, Jun 10 '17 at 19:42

score 1 · Answer 1 · answered Jun 10 '17 at 21:03

1

You can use the Media Fragment URI to easily jump to what period of the video you would like to show your user.

If you want to open the video in a new page you can use:

<a href="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_30mb.mp4#t=20,40">click here</a>

You define the portion of the video with #t=

In this link the browser expected to show the user from 20sec to 40sec only.

answered Jun 10 '17 at 21:03

mele

66
10

Good one, but can I use the #t as a variable ? – MouIdri Jun 10 '17 at 21:06
please elaborate – mele Jun 10 '17 at 21:09
1

when you PHP code inserts the link into the page, you can set #t to whatever you want as you build up that string – Offbeatmammal Jun 10 '17 at 21:27

score 1 · Accepted Answer · answered Jun 11 '17 at 00:20

Combining mele's answer and my comment, the basic code for a new PHP script/page that would play a video at a certain position could look like this:

<?php

if (!isset($_GET['position'])) {
  exit('Send the position of the video to play like: /outputVideo.php?position=20,40');
}

?>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Play Video</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      video { width: 100%; max-width: 500px; display: block; }
    </style>

  </head>
  <body>

    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_30mb.mp4#t=<?php print $_GET['position']; ?>" controls autoplay></video>

  </body>
</html>

Copy/paste the above code into a new file and title the file outputVideo.php and place it onto your web server. Then visit the page in the browser at: http://yoursite.com/outputVideo.php?position=20,40 You can try changing the position var to whatever you like. For example: position=10,60

I will upvote your solution since this one is very nice because of the GET idea. However, I find an easier solution : with
=$FrameTITLE ?>
and it does open a new tab which is what I wanted. — MouIdri, Jun 11 '17 at 00:35
btw did you tried you script before copying it ? something seems to be missing. — MouIdri, Jun 12 '17 at 11:33

Jump to a specific period of a video using PHP in HTML5

2 Answers2