video.html

<!doctype html>
<head>
    <meta charset="utf-8">
    <!-- including ECharts file -->
    <script src="echarts.js"></script>
    <script src="theme/roma.js"></script>
    <script src="theme/macarons.js"></script>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

    <title>Dementia TV</title>

</head>
<body>
    <div class="jumbotron text-center">
      <h1>Dementia TV</h1>
      <p>Emotion aware video service for the elderly</p> 
  </div>

  <div class="container">
      <div class="row">
        <div class="col-xl-8">
          <video id="myVideo", width="720" controls>

            <source src="mov_bbb.mp4" type="video/mp4">
                Your browser does not support HTML5 video.      
            </video>

            <script type="text/javascript">
               var video = document.getElementById('video');
               var source = document.createElement('source');

               source.setAttribute('src', 'mov_bbb.mp4');

               video.appendChild(source);
               video.play();

           </script>


       </div>
       <div class="col-xl-4">
         <div id="main" style="width: 600px;height:200px;"></div>
         <script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'),'macarons');

        // specify chart configuration item and data
        var option = {
            title: {
                text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, getCurTime()]
            }]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>
    <div class="row">
        <div class="col-xl-4">Content Type: nature &amp; Comic</div>
    </div>
</div>

</div>
</div>


<div class="row">
	<div class="col-xl-4">
		<button onclick="getCurTime()" type="button" class="btn btn-info">Get current time position</button>

       <script type="text/javascript">
           <!--

           var vid = document.getElementById("myVideo");

           function getCurTime() { 
            console.log(vid.currentTime);


            myChart.setOption({
        // title: {
        //     text: 'asynchronous data loading example'
                // },
                tooltip: {},
                legend: {
                    data:['Sales']
                },
                xAxis: {
                    data: ["shirts","cardigan","chiffon shirt","pants","heels","sockes"]
                },
                yAxis: {},
                series: [{
                    name: 'Sales',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, vid.currentTime]
                }]
            });


            return vid.currentTime;

            } 


        // function setCurTime() { 
        //     vid.currentTime=5;
        // } 

         //-->
     </script>
     <!-- preparing a DOM with width and height for ECharts -->

     <!-- prepare a DOM container with width and height -->
     <div id="main" style="width: 600px;height:400px;"></div>
     <script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'),'roma');

        // specify chart configuration item and data
        var option = {
            title: {
                text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, getCurTime()]
            }]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>


</div>
</div>


<script type="text/javascript">var t=setInterval(getCurTime,100);</script>
</body>

</body>