在 HTML5 中使用 PHP 跳转到视频的特定时段答案

【问题标题】：Jump to a specific period of a video using PHP in HTML5在 HTML5 中使用 PHP 跳转到视频的特定时段
【发布时间】：2017-06-10 18:46:36
【问题描述】：

我使用的不是 Youtube，而是托管在远程 Web 服务器上的视频。该视频的链接存储在我的 MySQL 数据库中。

edit ：视频可以在 Firefox 上打开并且可以看到：here。

我的代码是这样的：

<?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>

我查看了this SO 线程，这似乎是一个好的开始，但是我不想在我的页面上显示视频，我想点击链接，这将打开一个新页面并跳转到不在我的第一页上的视频页面中的特定帧/周期。

这可行吗？我是否必须在页面上加载视频才能跳转到那个时间段？由于我的代码是用 PH 编写的，如何添加命令：

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

我有点迷路了..有什么线索吗？

【问题讨论】：

您很可能需要currentTime JS HTML5 API 方法，在（新）页面和视频加载后在您的视频元素上调用它。如果该页面也使用 PHP，您可以通过像 /newpage.php?position=999 这样的 GET 变量将视频位置以秒为单位传递到该页面，然后通过页面上的 JS 变量将其输出到 JS：var videoPosition = 999; 或类似的东西:)
对不起，我的英语可能不太好。我想加载只有视频的空白页面，像这样：s3-api.dal-us-geo.objectstorage.softlayer.net/… 并直接说时间 50
页面如何知道在 50 秒后开始播放？或者，60秒？或者，其他一些价值？您需要以某种方式将该数据传递给它。我的建议是使用 PHP GET 变量，例如：?position=50。还有很多其他方法可以将此值赋予新的视频页面。这只是一种方式。最终结果将是您将该值（在本例中为 50）传递给您的 JavaScipt，然后它将知道从哪个位置开始播放视频。 JavaScript 可以通过 HTML5 的currentTime 方法完成此操作。
好吧.. 我明白了。但是代码会是什么样子呢？我对如何表达电话和脚本有点迷茫。

标签： php html video

【解决方案1】：

结合mele's answer 和我的评论，将在特定位置播放视频的新 PHP 脚本/页面的基本代码如下所示：

<?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>

将上述代码复制/粘贴到一个新文件中，并将文件命名为outputVideo.php 并将其放置到您的网络服务器上。然后在浏览器中访问该页面：http://yoursite.com/outputVideo.php?position=20,40 您可以尝试将position var 更改为您喜欢的任何内容。例如：position=10,60

【讨论】：

我会赞成你的解决方案，因为这个解决方案非常好，因为 GET 想法。但是，我找到了一个更简单的解决方案：使用
=$FrameTITLE ?>
并且它确实打开了一个我想要的新标签。
顺便说一句，您在复制之前尝试过您的脚本吗？好像少了点什么。
是的，我测试过了。它缺少什么？

【解决方案2】：

您可以使用媒体片段 URI 轻松跳转到您希望向用户展示的视频的哪个时段。

如果您想在新页面中打开视频，您可以使用：

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

您使用 #t=

定义视频的部分

在此链接中，浏览器预计仅向用户显示 20 秒到 40 秒。

【讨论】：

很好，但我可以使用#t 作为变量吗？
请详细说明
当您的 PHP 代码将链接插入页面时，您可以在构建该字符串时将 #t 设置为您想要的任何内容