Skip to content

Instantly share code, notes, and snippets.

@thuycom205
Created May 3, 2023 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thuycom205/9fc405d229fc0faa92a441f68baf106e to your computer and use it in GitHub Desktop.
Save thuycom205/9fc405d229fc0faa92a441f68baf106e to your computer and use it in GitHub Desktop.
youtube_viewer
<html>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="./var/odoo_tax.js" ></script>
<style>
.grid_container {
display: grid;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
}
</style>
<div class="grid_container">
<div id="video_section">
<button onclick="playPrev(this)">Preve</button>
<button onclick="playNext(this)">Next</button>
<button onclick="bookmark(this)">book mark</button> <textarea name="bookmark_note"></textarea>
<div id="render_bm"> </div>
<?php
//echo "hello world";
?>
<div id="video">
</div>
</div>
<div id="pagination_section">
<script type="text/javascript">
</script>
<?php
for ($i = 0 ; $i <85; $i++ ) {
$start = 1 + $i*30;
$end = 1 +($i+1) *30 ;
?>
<button data-start="<?php echo $start ?>" data-stop="<?php echo $end ?>" onclick="playMin(this)"> <?php echo $i ?> </button>
<?php
}
?>
<!--chapter 2-->
<?php
for ($i = 0 ; $i <85; $i++ ) {
$start = 85*60 + $i*60;
$end = 85*60 + $i*60 + 60;
?>
<button data-start="<?php echo $start ?>" data-stop="<?php echo $end ?>" onclick="playMin(this)"> <?php echo $i ?> </button>
<?php
}
?>
<!--end of chapter 2-->
<!--chapter 3-->
<?php
for ($i = 0 ; $i <85; $i++ ) {
$start = 58*60 + 85*60 + $i*60;
$end = 58*60 + 85*60+ $i*60 + 60;
?>
<button data-start="<?php echo $start ?>" data-stop="<?php echo $end ?>" onclick="playMin(this)"> <?php echo $i ?> </button>
<?php
}
?>
<!--end of chapter 3-->
<!--chapter 4-->
<?php
for ($i = 0 ; $i <85; $i++ ) {
$start = 58*60 + 85*60*2 + $i*60;
$end = 58*60 + 85*60*2+ $i*60 + 60;
?>
<button data-start="<?php echo $start ?>" data-stop="<?php echo $end ?>" onclick="playMin(this)"> <?php echo $i ?> </button>
<?php
}
?>
<br/>
<!--end of chapter 4-->
<!--chapter 5-->
<?php
for ($j = 3; $j < 28; $j++ ) {
?>
<div> chapter <?php echo $j ?> </div>
<?php
for ($i = 0 ; $i <85; $i++ ) {
$start = 58*60 + 85*60*$j + $i*60;
$end = 58*60 + 85*60*$j + $i*60 + 60;
?>
<button data-start="<?php echo $start ?>" data-stop="<?php echo $end ?>" onclick="playMin(this)"> <?php echo $i ?> </button>
<?php
}
?>
<br>
<?php
}
?>
<!--end of chapter 5-->
</div>
</div>
</html>
@thuycom205
Copy link
Author

`function bookmark(element) {
var myParam = location.search.split('vid=')[1]

var note =  jQuery('textarea[name="bookmark_note"]').val();
var data = {action: 'masr_ajax_submit_bookmark','vid_id': myParam, 'note' :note, 'start' : window.l_start, 'end' : window.l_end };

var  ajaxurl = "https://thuysaas.com/blog/wp-admin/admin-ajax.php";
jQuery.post(ajaxurl, data).done(function (response) {

        console.log(json);
    }

).fail(function (xhr, status, error) {
   // show_notification('Get status of filters failed.', true);
});

}

function playNext() {
var next = jQuery(window.activeBtn).next();
next.trigger('click');
}
function playPrev() {
var next = jQuery(window.activeBtn).prev();
next.trigger('click');
}
jQuery( document ).ready(function() {
show_bookmark();
});

function show_bookmark() {
var data = {action: 'masr_get_bookmark'};
var ajaxurl = "https://thuysaas.com/blog/wp-admin/admin-ajax.php";
jQuery.get(ajaxurl, data).done(function (response) {
console.log(response);
var html = '';
for (var i = 0; i < response.length; i++) {
var item = response[i];
html += '<button ' + 'data-start="' + item.start + '"' + ' data-stop=' + '"' + item.end + '"' + ' onclick="playMin(this)">' + item.start + ''
}

        jQuery('#render_bm').html(html);
    }
).fail(function (xhr, status, error) {
    // show_notification('Get status of filters failed.', true);
});

}
function playMin(element) {
window.activeBtn = element;
var startStr = jQuery(element).attr('data-start');
window.l_start = startStr;

var endStr = jQuery(element).attr('data-stop');
window.l_end = endStr;
jQuery(element).css('color', 'blue');
var parent = jQuery(element).parent();

var ies = parent.find('button').each(function (index, e) {
    jQuery(e).css('color', 'black');
});
jQuery(element).css('color', 'blue');

var startInt = parseInt(startStr);
var endInt = parseInt(endStr);
jQuery('#video').html('');
var myParam = location.search.split('v=')[1]

var html = '<iframe width="1200" height="675" src="https://www.youtube.com/embed/'  + myParam + '?start={start}&end={end}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><!--<iframe width="1280" height="720" src=”https://www.youtube-nocookie.com/embed/gyMwXuJrbJQ?start=225&end=268rel=0&amp;showinfo=0″ frameborder=”0″ allowfullscreen></iframe-->';
html = html.replace('{start}', startStr).replace('{end}', endStr);
jQuery('#video').html(html);

}`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment