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

Support
,
1

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:
player.seek(30); // 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();
player.timeShift(currentTime);
But if I use this to start video from new time by passing a value in second it do not work.

2

Hi,
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">

<head>
    <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="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/bit-fav.png">
    <!-- Bitmovin Player -->
    <script src="//cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
    <style>
        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;
        }
        
        h1,
        h2,
        h3,
        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;
            }
        }
    </style>
</head>

<body>
    <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>
            <div class="clear"></div>
        </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>
                <div class="description">
                    <p>For more information about the bitmovin player, please have a look at our online <a href="//bitmovin.com/support" target="_blank">Developer Section</a>.</p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var player;

        var conf = {
            key: "YOUR_KEY"
        }

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

        var source = {
            dash: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
            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!
        });
    </script>
</body>

</html>

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

Eg.
http://127.0.0.1:5500/simple.html?startTime=30 : the video will start at 30s

3

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.

Thanks.

4

Ah yes, you could achieve this the following way :

<button onclick="player.seek(30)">Seek to 30 seconds</button>

or

<a href="#" onclick="player.seek(30)">Seek to 30 seconds</a>
5

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="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>
<script src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js" type="text/javascript"></script>

    </div>
    <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>
    </div>
    
</section>
6

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

7

Hi @ludovic.michaud
Awaiting your reply.

8

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