<div id="output"></div>
<div class="col-sm-6">

    <video width="600" height="350" id="player1" 
           src="<?php echo base_url() . $video_info->upload_video_location; ?>" 
           type="video/mp4" controls="controls" >
    </video>
    <!--<span id="time"></span>-->
    <span><?php echo $video_info->upload_video_name; ?></span>
    
</div>


<?php
$transcript = $video_info->upload_video_transcript;

$trans_word = explode(' ', $transcript);
$trans_sentence = explode('.', $transcript);
$trans_paragraph = str_replace('<p>', ' ', $transcript);
$trans_paragraph = explode('</p>', $trans_paragraph);
?>
<div class="col-sm-4 pull-right" >
    <div style="border: 1px solid #80C12C; height: 350px; margin-top: 0px;" >
        <h4 class="text-left">Transcripts</h4><hr>
        <div style="height: 250px; overflow-y: scroll; " id="viewport1" >

            <div class="text-justify" style="margin: 10px;" id="transcript">

                <?php
                $sentence_counter = 0;

                for ($i = 0; $i < count($trans_paragraph) - 1; $i++) {
                    ?>
                    <?php
                    echo '<p>';
                    $trans_paragraph_sentence = explode('.', $trans_paragraph[$i]);
                    $trans_paragraph_sentence_word = explode('.', $trans_paragraph_sentence[$i]);

                    for ($j = 0; $j < count($trans_paragraph_sentence) - 1; $j++) {
                        ?>
                        <span id="sentence<?php echo $sentence_counter; ?>"><?php echo $trans_paragraph_sentence[$j] . '.'; ?></span>
                        <?php
                        $sentence_counter++;
                    }
                    echo '</P><br>';
                }
                ?>
            </div>
        </div>

    </div>
</div>