$(document).ready(function () { "use strict"; var vidHtml = $( '
Pause
Rewind 10 Seconds
Previous video
Next video
Mute
00:00
/
00:00
Full screen
Exit full screen
Playlist
Next Up
' ); $(".vidcontainer").html(vidHtml); var vid = $("#myvid"); // picture in picture mode js const videos = document.querySelectorAll('myvid'); videos.forEach((video) => { video.disablePictureInPicture = true; }); document.getElementById('vidEle').addEventListener('contextmenu', (event) => { event.preventDefault(); // Add your desired actions here, if any }); // picture in picture ends $(".videolist").removeClass("active"); function scrollToPlaying() { var playingElement = $(".videolist").find(".vids a.link.playing"); if (playingElement.length) { var position = playingElement.position().top + $(".videolist").scrollTop(); $(".videolist").animate({ scrollTop: position }, "fast"); } } scrollToPlaying(); $(".link").on("click", function (event) { event.preventDefault(); $(".reload").hide(); $(".control_conta").addClass("show"); $(".videolist").removeClass("active"); var videoName = $(this).attr("data-video-name"); $(vid).attr("src", "jwplayer/" + videoName + ".webm"); $(vid).attr("src", "jwplayer/" + videoName + ".ogv"); $(vid).attr("src", "jwplayer/" + videoName + ".mp4"); $(".vids a").removeClass("playing"); $(this).addClass("playing"); $(".btnPlay").addClass("paused"); vid[0].play(); toggleVideoControls(); if ($(".vids a.link:first").hasClass("playing")) { $(".prevvid").addClass("disabled"); scrollToPlaying(); } else { $(".prevvid").removeClass("disabled"); } if ($(".vids a.link:last").hasClass("playing")) { } else { $(".nextvid").removeClass("disabled"); scrollToPlaying(); } }); $(".loading").fadeOut(); vid.on("canplay", function () { // $(".btnPlay").addClass("paused"); $(".loading").fadeOut(100); $(".reload").hide(); // $(".control_conta").addClass("show"); }); var completeloaded = false; vid.on("canplaythrough", function () { completeloaded = true; }); function exitPictureInPicture() { if (document.pictureInPictureElement) { document.exitPictureInPicture().catch((error) => { console.error("Error exiting PiP:", error); }); } } vid.on("ended", function () { $(".btnPlay").removeClass("paused"); vid[0].pause(); var next = $(".vids .link.playing").next().attr("data-video-name"); // toggleVideoControls(); $(".control_conta").addClass("show"); }); vid.on("ended", function () { $(".btnPlay").removeClass("paused"); vid[0].pause(); var next = $(".vids .link.playing").next(); if (next.length > 0) { var nextVideoName = next.attr("data-video-name"); switchToVideo(nextVideoName); naxtToVideo(); scrollToPlaying(); } else { var firstVideo = $(".vids .link").first().attr("data-video-name"); // switchToVideo(firstVideo); $(".vids a").removeClass("playing"); } exitPictureInPicture(); }); function switchToVideo(videoName) { vid.attr("src", videoName); vid[0].load(); vid[0].play(); } vid.on("seeking", function () { if (!completeloaded) { $(".loading").fadeIn(200); } }); vid.on("seeked", function () {}); vid.on("waiting", function () { $(".loading").fadeIn(200); }); var startBuffer = function () { var currentBuffer = vid[0].buffered.end(0); var maxduration = vid[0].duration; var perc = (100 * currentBuffer) / maxduration; $(".bufferBar").css("width", perc + "%"); if (currentBuffer < maxduration) { setTimeout(startBuffer, 500); } }; $(".vid_thumb_cont").hide(); vid.on("loadedmetadata", function () { const maxduration = vid[0].duration; $(".duration").text(timeFormat(maxduration)); }); $(document).ready(function() { $("#myvid").on('play', function() { $("#normalScreenBtn").css('display' , 'none') }); }); vid.on("timeupdate", function () { const currentPos = vid[0].currentTime; const maxduration = vid[0].duration; const perc = maxduration && maxduration > 0 ? (100 * currentPos) / maxduration : 0; $(".timeBar").css("width", perc + "%"); $(".knob_cont").css("left", perc + "%"); $(".current").text(timeFormat(currentPos)); $(".duration").text(!isNaN(maxduration) ? timeFormat(maxduration) : "00:00"); toggleVideoControls(); if (perc >= 90 && !$(".vid_thumb_cont").hasClass("shown")) { $(".vid_thumb_cont").show().addClass("shown"); const activeTxt = $(".video_page .vids .playing").next().find(".video-info h3").html(); $(".vid_thumb_active").html(activeTxt); $(".thumb_close_icon").on("click", function (e) { e.stopPropagation(); $(".vid_thumb_cont").hide(); }); if ($(".vids a.link:last").hasClass("playing")) { $(".vid_thumb_cont").hide(); if (perc >= 100) { $(".loading").show(); $(".link[data-video-name]").removeClass("playing"); } else { $(".loading").hide(); } } } else if (perc < 90) { $(".vid_thumb_cont").removeClass("shown").hide(); } }); function timeFormat(seconds) { var minutes = Math.floor(seconds / 60); var secs = Math.floor(seconds % 60); return (minutes < 10 ? "0" + minutes : minutes) + ":" + (secs < 10 ? "0" + secs : secs); } $(".vid_thumb_img, .vid_thumb_content").on("click", function () { naxtToVideo(); toggleVideoControls(); }); $('.reload').on('click', function() { var videoName = $(".videos_list li").attr('data-video-name'); // Clear existing sources $(vid).empty(); // Add new sources $(vid).append(`
`); $(vid).append(`
`); $(vid).append(`
`); // Remove all active classes from the tabs $('.link[data-video-name]').removeClass('playing'); // Add active class to the current video item $('.link[data-video-name="' + videoName + '"]').addClass('playing'); scrollToPlaying(); // Reload the video and play it vid[0].load(); // Reloads the video to apply the new sources vid[0].play(); $('.btnPlay').addClass('paused'); $(".nextvid").removeClass("disabled"); $(".prevvid").addClass("disabled"); $(this).hide(); }); if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { vid.on("click", function () { playpause(); $(".txt_ply").text("Pause"); }); } else { vid.on("click", function () { playpause(); $(".txt_ply").text("Play"); }); } $(".rewind").on("click", function () { vid[0].play(); vid[0].currentTime -= 10; }); $(".btnPlay").on("click", function () { playpause(); $(".txt_ply").fadeIn(); setTimeout(function () { $(".txt_ply").fadeOut(); }, 1000); }); var playpause = function () { if (vid[0].paused || vid[0].ended) { $(".btnPlay").addClass("paused"); vid[0].play(); $(".txt_ply").text("Pause"); } else { $(".btnPlay").removeClass("paused"); vid[0].pause(); $(".txt_ply").text("Play"); } }; var timeDrag = false; // Mouse events $(".progress").on("mousedown", function (e) { timeDrag = true; updatebar(e.pageX); $(".tooltip").hide(); }); $(document).on("mouseup", function (e) { if (timeDrag) { timeDrag = false; updatebar(e.pageX); } }); $(document).on("mousemove", function (e) { if (timeDrag) { updatebar(e.pageX); } }); // Touch events $(".progress").on("touchstart", function (e) { timeDrag = true; updatebar(e.touches[0].pageX); $(".tooltip").hide(); }); $(document).on("touchend", function (e) { if (timeDrag) { timeDrag = false; updatebar(e.changedTouches[0].pageX); } }); $(document).on("touchmove", function (e) { if (timeDrag) { updatebar(e.touches[0].pageX); } }); $(".progress").on("mousemove", function (e) { e.preventDefault(); var progress = $(this); var maxduration = vid[0].duration; if (!isNaN(maxduration)) { var position = e.pageX - progress.offset().left - 13; var percentage = (100 * position) / progress.width(); if (percentage > 100) percentage = 100; if (percentage < 0) percentage = 0; var hoverTime = (maxduration * percentage) / 100; var tooltipText = formatTime(hoverTime); var tooltipLeft = position + 5; var tooltipWidth = $(".tooltip").outerWidth(); var progressBarWidth = progress.width(); if (tooltipLeft + tooltipWidth > progressBarWidth) { tooltipLeft = progressBarWidth - tooltipWidth - 0; } $(".tooltip") .text(tooltipText) .css({ left: tooltipLeft + "px" }) .show(); } }); $(".progress").on("mouseleave", function () { $(".tooltip").hide(); }); function formatTime(seconds) { var minutes = Math.floor(seconds / 60); var remainingSeconds = Math.floor(seconds % 60); return minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds; } var updatebar = function (x) { var progress = $(".progress"); var maxduration = vid[0].duration; var position = x - progress.offset().left; var percentage = (100 * position) / progress.width(); if (percentage > 100) { percentage = 100; } if (percentage < 0) { percentage = 0; } $(".timeBar").css("width", percentage + "%"); $(".knob_cont").css("left", percentage + "%"); vid[0].currentTime = (maxduration * percentage) / 100; }; $(".sound").click(function () { vid[0].muted = !vid[0].muted; $(this).toggleClass("muted"); if (vid[0].muted) { $(".volumeBar").css("width", 0); $("#volumeSlider").val(0.0); } else { $(".volumeBar").css("width", vid[0].volume * 100 + "%"); $("#volumeSlider").val(0.7); } }); vid[0].addEventListener("volumechange", () => { if (vid[0].muted) { $(".sound").addClass("muted"); $(".volumeBar").css("width", 0); $("#volumeSlider").val(0.0); $(".sund_txt").text("Unmute"); } else { $(".sound").removeClass("muted"); $(".volumeBar").css("width", vid[0].volume * 100 + "%"); $("#volumeSlider").val(vid[0].volume); $(".sund_txt").text("Mute"); } }); $(".vol_cont").hover(function () { $(this).toggleClass("width_bar"); }); function toggleVideoControls() { $(".vidcontainer").hover( function () { $(".control_conta").addClass("show"); }, function () { $(".control_conta").removeClass("show"); } ); } var volumeDrag = false; $(".volume").on("mousedown", function (e) { volumeDrag = true; vid[0].muted = false; $(".sound").removeClass("muted"); updateVolume(e.pageX); }); $(document).on("mouseup", function (e) { if (volumeDrag) { volumeDrag = false; updateVolume(e.pageX); } }); $(document).on("mousemove", function (e) { if (volumeDrag) { updateVolume(e.pageX); } }); var updateVolume = function (x, vol) { var volume = $(".volume"); var percentage; if (vol) { percentage = vol * 100; } else { var position = x - volume.offset().left; percentage = (100 * position) / volume.width(); } if (percentage > 100) { percentage = 100; } if (percentage < 0) { percentage = 0; } $(".volumeBar").css("width", percentage + "%"); vid[0].volume = percentage / 100; if (vid[0].volume == 0) { $(".sound").removeClass("sound2").addClass("muted"); } else if (vid[0].volume > 0.5) { $(".sound").removeClass("muted").addClass("sound2"); } else { $(".sound").removeClass("muted").removeClass("sound2"); } }; $(".spdx50").on("click", function () { fastfowrd(this, 1.5); }); $(".spdx25").on("click", function () { fastfowrd(this, 1.25); }); $(".spdx1").on("click", function () { fastfowrd(this, 1); }); $(".spdx050").on("click", function () { fastfowrd(this, 0.5); }); var fastfowrd = function (obj, spd) { $(".speedcnt li").removeClass("selected"); $(obj).addClass("selected"); vid[0].playbackRate = spd; vid[0].play(); $("ul.speedcnt").fadeOut("fast"); $(".btnPlay").addClass("paused"); $(".txt_ply").text("Pause"); }; $(".btnspeed").click(function () { $("ul.speedcnt").slideToggle(100); }); var vidElment = document.getElementById("vidEle"); function launchIntoFullscreen(element) { var timeout = null; $(".fullscreen").on("mousemove", function () { if (timeout !== null) { $(".control_conta").addClass("show"); $(".video_page .fullscreen .vidcontainer").css("cursor", "pointer"); clearTimeout(timeout); } timeout = setTimeout(function () { $(".control_conta").removeClass("show"); $(".video_page .fullscreen .vidcontainer").css("cursor", "none"); }, 5000); }); if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } if (document.addEventListener) { document.addEventListener("webkitfullscreenchange", exitHandler, false); document.addEventListener("mozfullscreenchange", exitHandler, false); document.addEventListener("fullscreenchange", exitHandler, false); document.addEventListener("MSFullscreenChange", exitHandler, false); } function exitHandler() { if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) { $(".video_center").removeClass("fullscreen"); $(".video_container").removeClass("closescreen"); $(".full_icon").css("display", "none"); } } function toggleFullscreen(isEnteringFullscreen) { if (isEnteringFullscreen) { $(".video_center").addClass("fullscreen"); $(".video_container").addClass("closescreen"); launchIntoFullscreen(vidElment); } else { exitFullscreen(); setTimeout(function() { $(".video_center").removeClass("fullscreen"); $(".video_container").removeClass("closescreen"); $(".videolist").removeClass("active"); }, 1000); // $(".video_center").removeClass("fullscreen"); // $(".video_container").removeClass("closescreen"); // $(".videolist").removeClass("active"); } } $(".btnFS").on("click", function () { toggleFullscreen(true); }); $(".full_icon").on("click", function () { toggleFullscreen(false); }); vid[0].addEventListener("dblclick", function () { if (document.fullscreenElement || document.mozFullScreen || document.webkitIsFullScreen) { toggleFullscreen(false); } else { toggleFullscreen(true); } }); $(".video_center").removeClass("fullscreen"); $(".video_container").removeClass("closescreen"); if ((vid.onplaying = true)) { $(".btnPlay").addClass("paused"); $(".txt_ply").text("Pause"); } else { $(".btnPlay").removeClass("paused"); $(".txt_ply").text("Play"); } $(".prevvid").click(function () { var currentPlaying = $(".vids a.playing"); var prevVideo = currentPlaying.prev(); if (prevVideo.length > 0) { var videoName = prevVideo.attr("data-video-name"); $(vid).attr("src", "jwplayer/" + videoName + ".webm"); $(vid).attr("src", "jwplayer/" + videoName + ".ogv"); $(vid).attr("src", "jwplayer/" + videoName + ".mp4"); vid[0].play(); currentPlaying.removeClass("playing"); prevVideo.addClass("playing"); $(".btnPlay").addClass("paused"); $(".txt_ply").text("Pause"); $(".nextvid").removeClass("disabled"); toggleVideoControls(); if ($(".vids a.link:first").hasClass("playing")) { $(this).addClass("disabled"); } else { $(this).removeClass("disabled"); scrollToPlaying(); } } return false; }); var naxtToVideo = function () { var windowWidth = $(window).width(); var currentPlaying, nextVideo, firstVideo, videoName; if (windowWidth < 1180) { currentPlaying = $(".vids a.playing"); nextVideo = currentPlaying.next("a.link"); if (nextVideo.length > 0) { videoName = nextVideo.attr("data-video-name"); updateVideoSource(videoName); playVideo(nextVideo, currentPlaying); } else { firstVideo = $(".vids a.link:first"); videoName = firstVideo.attr("data-video-name"); updateVideoSource(videoName); playVideo(firstVideo, currentPlaying); } } else { currentPlaying = $(".vids:visible a.playing"); nextVideo = currentPlaying.next("a.link"); if (nextVideo.length > 0) { videoName = nextVideo.attr("data-video-name"); updateVideoSource(videoName); playVideo(nextVideo, currentPlaying); } else { firstVideo = $(".vids:visible a.link:first"); videoName = firstVideo.attr("data-video-name"); updateVideoSource(videoName); playVideo(firstVideo, currentPlaying); } } }; function updateVideoSource(videoName) { $(vid).attr("src", "jwplayer/" + videoName + ".webm"); $(vid).attr("src", "jwplayer/" + videoName + ".ogv"); $(vid).attr("src", "jwplayer/" + videoName + ".mp4"); vid[0].play(); } function playVideo(nextVideo, currentPlaying) { currentPlaying.removeClass("playing"); nextVideo.addClass("playing"); $(".btnPlay").addClass("paused"); $(".txt_ply").text("Pause"); $(".prevvid").removeClass("disabled"); toggleVideoControls(); scrollToPlaying(); } $(".nextvid").click(function () { naxtToVideo(); toggleVideoControls(); }); function videoPause() { vid[0].pause(); var videoName = $(".vids a.playing").attr("data-video-name"); $(vid).attr("src", "jwplayer/" + videoName + ".webm"); $(vid).attr("src", "jwplayer/" + videoName + ".ogv"); $(vid).attr("src", "jwplayer/" + videoName + ".mp4"); } var timeFormat = function (seconds) { var m = Math.floor(seconds / 60) < 10 ? "0" + Math.floor(seconds / 60) : Math.floor(seconds / 60); var s = Math.floor(seconds - m * 60) < 10 ? "0" + Math.floor(seconds - m * 60) : Math.floor(seconds - m * 60); return m + ":" + s; }; $(".videos_list li").each(function (index) { $(this).on("click", function (e) { e.stopPropagation(); $(".loading").hide(); $(".video_container").show(); var videoName = $(this).attr("data-video-name"); $(vid).attr("src", "jwplayer/" + videoName + ".webm"); $(vid).attr("src", "jwplayer/" + videoName + ".ogv"); $(vid).attr("src", "jwplayer/" + videoName + ".mp4"); $(".link[data-video-name]").removeClass("playing"); $('.link[data-video-name="' + videoName + '"]').addClass("playing"); vid[0].play(); toggleVideoControls(); scrollToPlaying(); $(".btnPlay").addClass("paused"); $(".txt_ply").text("Pause"); $("body").css("overflow", "hidden"); $(".videolist").removeClass("active"); $(".prevvid").addClass("disabled"); $(".nextvid").removeClass("disabled"); if (vid[0].muted) { updateVolume(0, 0); } else { updateVolume(0, 0.7); } if ($(".vids a.link:first").hasClass("playing")) { $(".prevvid").addClass("disabled"); } else if ($(".vids a.link:last").hasClass("playing")) { $(".prevvid").removeClass("disabled"); } else { $(".prevvid").removeClass("disabled"); scrollToPlaying(); } }); }); function closeVideo() { $(".loading").hide(); $(".video_container").hide(); $("body").css("overflow", "auto"); vid[0].pause(); vid[0].load(); volumeDrag = true; vid[0].muted = false; $(".sound").removeClass("muted"); } $(".pop_close_icon").on("click", function (e) { closeVideo(); exitPictureInPicture(); }); $(document).on("keydown", function (e) { if (e.keyCode == 27) { $(".video_center").removeClass("fullscreen"); closeVideo(); exitPictureInPicture(); } }); // document.body.onkeyup = function (e) { // if (e.keyCode == 32) { // playpause(); // } // }; $(document).on("keydown",function(e){if(e.keyCode===32){e.preventDefault();playpause();$(".reload").hide();}}); $(".container").on("click", function (e) { e.stopPropagation(); }); vid.on("ended", () => { $(".btnPlay").removeClass("paused"); $(".reload").show(); exitPictureInPicture(); }); $(document).on("click", "body", function () { if ($(".container").length != 0) { closeVideo(); exitPictureInPicture(); } }); $(".playlist").on("click", function () { $(".videolist").toggleClass("active"); vid[0].pause(); $(".btnPlay").addClass("paused"); $(".txt_ply").text("Play"); vid[0].load(); $(".control_conta").removeClass("show"); }); $(".video_inner_close").on("click", function () { $(".videolist").removeClass("active"); vid[0].play(); $(".btnPlay").addClass("paused"); $(".txt_ply").text("Pause"); }); if ($(".video_container").hasClass("no_playlist")) { $(".video_center").addClass("no_list"); } $(".no_list") .find("#myvid") .on("ended", function () { // $(".loading").show(); exitPictureInPicture(); }); vid[0].addEventListener("pause", () => { $(".btnPlay").removeClass("paused"); $(".txt_ply").text("Play"); }); vid[0].addEventListener("play", () => { $(".btnPlay").addClass("paused"); $(".txt_ply").text("Pause"); }); }); $(document).ready(function () { // loading drag seek bar var video = $('#myvid')[0]; // Assuming your video element has the id 'videoElement' var loadingIcon = $('.loading'); // Assuming your loading icon has the id 'loadingIcon' // Show the loading icon when seeking starts $(video).on('seeking', function() { loadingIcon.show(); // Display the loading icon }); // Hide the loading icon when the video is ready to play after seeking $(video).on('seeked canplay', function() { loadingIcon.hide(); // Hide the loading icon }); // Hide the loading icon when the video is playing normally $(video).on('playing', function() { loadingIcon.hide(); }); });