How to dynamically skip over to video timestamp in html5

问题: What Ive created till now : Ive created an html5 webpage which plays video and user has the option to insert any message about any timestamp in video. The "message" & "...

问题:

What Ive created till now : Ive created an html5 webpage which plays video and user has the option to insert any message about any timestamp in video. The "message" & "timestamp" gets inserted in the sql database and gets displayed live/dynamically alongside the video.

Ive also added a test button, which once clicked , skips over to 5th second of video. But..

What I want: As soon as I click submit on any timeframe of the video, that particular timestamp should be displayed as clickable (skipover). Only the tstamp should be clickable(which is obvious)

My requirement in short: Can I change the $sql line(in insert.php) to this--> $sql = "INSERT INTO saveData (message,<p><button id="jump">tstamp</button></p>) VALUES('".$_POST["message"]."', '".$_POST["tstamp"]."')";

My index.html :--

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="550" height="268"
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type='video/ogg'>
<track src='br.srt' kind="subtitles" srclang="en" label="English" default>
</video>   

<script>
// Get the audio element with id="my_video_1"
var aud = document.getElementById("my_video_1");

// Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
aud.ontimeupdate = function() {myFunction()};  
</script>


<div class="container_" >
<form name="contact-form"   action="" method="post" id="contact-form"   style="position: absolute;left: auto;width: 200px;
  height: 120px;">
<label for="email">Comments about the frame</label>
<textarea name="message" class="form-control" id="message"></textarea>

<div class="error" id="error_message"></div>

<label>Vid Skip:</label>
<p>TimeStamp: <span id="tstamp"></span></p>
<input name="tstamp" id="hidden-tstamp" type="hidden">
<p class="submit" >
<button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
<p><button id="jump">Jump to 5th second onward</button></p>
</p>
</div>


<div class="display-content">
<div class="message-wrap dn"> </div>
</div>
</form>
</div>


<script>
var myvideo = document.getElementById('my_video_1'),
    playbutton = document.getElementById('playme'),
    jumplink = document.getElementById('jump');

jumplink.addEventListener("click", function (event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 5;
    myvideo.play();
}, false);
</script>

My insert.php looks like this :

# message is type text, tstamp is type float 
<?php  
$connect = mysqli_connect("localhost", "root", "", "stackover");
$sql = "INSERT INTO saveData (message, tstamp) VALUES('".$_POST["message"]."', '".$_POST["tstamp"]."')";  
if(mysqli_query($connect, $sql))  
{  
     echo 'Data Inserted';  
}  
 ?>
# Can I change the $sql line to this--> $sql = "INSERT INTO saveData (message, <p><button id="jump">tstamp</button></p>) VALUES('".$_POST["message"]."', '".$_POST["tstamp"]."')";

回答1:

1) Change add button type

<button type="button" id="jump">Jump to 197.07</button>

2) change your script with below code

var myvideo = document.getElementById('my_video_1'),
        jumplink = document.getElementById('jump');
    var demo=0;
    jumplink.addEventListener('click',function() {  getSelection(demo) }, false);
    function getSelection(demo) {
        myvideo.play();
        myvideo.pause();
        myvideo.currentTime = demo;
        myvideo.play();
    }

3) add this inside your script also

$(function () {
   $(document).delegate(".tstamp", 'click', function (e) {
     e.preventDefault();
     $('#jump').trigger('click');
     getSelection($(this).data('id2'))
   });
 });
  • 发表于 2019-07-05 17:56
  • 阅读 ( 187 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除