HTML5 _ How to add hyperlinks to Video Markers

How to add hyperlinks on the website to start the video from the time indicated in src1, src2 and src3 of the .html5-doc? It should be done by anyone who can visit the website.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>

<video controls>

<source src1="C417.mp4#t=0,5"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>


<source src2="C417.mp4#t=5,10"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>


  <source src3="C417.mp4#t=10,15"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>

</video>

</body>
</html>

Thank you

Update: Tried some. How to properly attach the function to the button? The video should be started at 5 seconds by a button click. It does not work like here:

  <video controls>
    <source id="video_ID1" src="C111a.mp4"
            type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
    </video>

    <button onclick="bxClick1()">5sec</button>

        <script>
            function bxClick1() {
                document.getElementById("video_ID1").addEventListener('loadedmetadata', function() 
            {
                    this.currentTime = 5;
            }, false);                
        }
        </script>

The video is shown and can be started by the default controls. THe attachment of the button to play is my problem

Solution

The media fragments URL approach you are using above looks correct - the issue with it is that in the past not all browsers have supported it.

You can achieve the same thing using Javascript to preload the video and as soon as it is loaded jump to whatever position you want.

See below for an example - this assume you add id's to your videos:

<source id ="videoID_1" src1="C417.mp4"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>    

document.getElementById('videoID_1').addEventListener('loadedmetadata', function() 
      {
        this.currentTime = 5;
      }, false);