Need to add links that can be clicked to start video from a certain time duration

This is my first time player integration and I have a requirement where user can click to a link that display start time of each caption and video need to start from that time.
I have tried seek function but it didn’t worked for me. I tried using timeShift but no luck.
I am currently using sandbox version, to create a POC.

Seek integration:; // Seek to 30 seconds
This always start video from 0th second

timeShift integration:
Below work for me if I play and pause from same duration
var currentTime = player.getCurrentTime();
But if I use this to start video from new time by passing a value in second it do not work.

Using source.options would be a better way that using timeShift, so the player is loaded right away with the offset you need

You can try the following :

<!DOCTYPE html>
<html lang="en">

    <title>Bitmovin Demo</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=",400" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/bit-fav.png">
    <!-- Bitmovin Player -->
    <script src="//"></script>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Open Sans', sans-serif;
            color: #fff;
            font-weight: 300;
        body {
            background: rgba(44, 131, 185, 1);
            background: -moz-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(44, 131, 185, 1)), color-stop(100%, rgba(30, 171, 227, 1)));
            background: -webkit-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            background: -o-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            background: -ms-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            background: linear-gradient(to right, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#2c83b9', endColorstr='#1eabe3', GradientType=1);
        #wrapper {
            background: url(images/logo-bg-demopage.png);
            height: 100vh;
        #banner {
            border-bottom: 1px solid #fff;
            background-color: #1eabe3;
            width: 100%
        #banner h1 {
            margin: 0;
            padding: 30px;
        .logo {
            padding: 10px;
            width: 25%;
            min-width: 350px;
            float: left;
            margin: auto;
        .title {
            width: 75%;
            white-space: nowrap;
        .clear {
            clear: both;
        .content {
            margin-bottom: 10em;
        p {
            font-weight: 300;
            text-align: center;
            margin: 40px;
        #player {
            max-width: 900px;
            width: 90%;
            margin: auto;
            -webkit-box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
        a {
            color: #97d9ef;
            font-weight: 400;
            text-decoration: none;
        a:hover {
            color: #fff;
        @media (max-width: 800px) {
            .logo {
                width: 100%;
            .title {
                display: none;

    <div id="wrapper">
        <div id="banner">
            <div class="logo"><img src="images/bitmovin-logo.png"></div>
            <div class="title">
                <h1>Bitmovin HTML5 Player</h1>
            <div class="clear"></div>
        <div class="container">
            <h1>HTML5 Adaptive Streaming Player for MPEG-DASH & HLS</h1>
            <h2>Your videos play everywhere with low startup delay, no buffering and in highest quality.</h2>
            <div class="content">
                <div class="player-wrapper">
                    <div id="player"></div>
                <div class="description">
                    <p>For more information about the bitmovin player, please have a look at our online <a href="//" target="_blank">Developer Section</a>.</p>
    <script type="text/javascript">
        var player;

        var conf = {
            key: "YOUR_KEY"

        const queryString =;
        const params = new URLSearchParams(queryString);
        const startTime = params.get('startTime');

        var source = {
            dash: '',
            options: {
                "startOffset": startTime,
                "startOffsetTimelineReference": "start"

        player = new bitmovin.player.Player(document.getElementById('player'), conf);

        player.load(source).then(function() {
            console.log('Successfully loaded source'); // Success!
        }, function() {
            console.log('Error while loading source'); // Error!


This page user the startTime query parameter to define where to start the video.

Eg. : the video will start at 30s

Hi Ludo,

Thanks for your reply.
I do not want to reload page. I have a video in my webpage and I want to click on links and call player event that can move video to that particular time.
For example video is playing at 00:01:25 and I have a link [go to 00:02:35] to make video jump to 00:02:34. When I click this link [go to 00:02:35] using javascript event I want to move video from 00:01:25 to 00:02:34 directly.

With the solution mentioned by you, page will get reloaded and that will not work for my requirement.


Ah yes, you could achieve this the following way :

<button onclick="">Seek to 30 seconds</button>


<a href="#" onclick="">Seek to 30 seconds</a>

Thanks for your resoponse.
I have tried seek() already but for me it always start the video from 0th second.
I am sharing my code below, may be I have made some configuration mistake.
Sharing part of my code:

<title>Bitmovin Player</title>

<link href="" rel="stylesheet" crossorigin="anonymous">
<script src=""></script>
<script src=""  crossorigin="anonymous"></script>
<script src="" type="text/javascript"></script>
    <div id="subtitle-container1" class="subtitle-container">
        <a href="javasciprt:void(0);" onclick="setTimeTo(40)">Jump to 40 sec</a><br>
        <a href="javasciprt:void(0);" onclick="setTimeTo(80)">Jump to 80 sec</a><br>

I have tested using 2 videos but both play from start (0th sec).

Hi @ludovic.michaud
Awaiting your reply.

Can you please share your full source code ? Please feel free to share through a google drive link. I will check your page and fix it if I can