|
|
@@ -20,6 +20,39 @@
|
|
|
<link rel="stylesheet" href="/static/css/main.css">
|
|
|
|
|
|
</head>
|
|
|
+<style>
|
|
|
+ .video-hover-container {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-hover-container img,
|
|
|
+ .video-hover-container video {
|
|
|
+ display: block;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-hover-container a {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Spinner styles */
|
|
|
+ .spinner {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border: 4px solid #fff;
|
|
|
+ border-top: 4px solid transparent;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes spin {
|
|
|
+ 0% { transform: rotate(0deg); }
|
|
|
+ 100% { transform: rotate(360deg); }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
<body class="main-body">
|
|
|
|
|
|
<div class="menu-overlay"></div>
|
|
|
@@ -92,9 +125,9 @@
|
|
|
<tbody>
|
|
|
@foreach($content as $item)
|
|
|
<tr>
|
|
|
- <td>
|
|
|
+ <td class="video-hover-container">
|
|
|
<a href="{{ossUrl($item['cover'])}}" target="_blank">
|
|
|
- <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260" class="void-img">
|
|
|
+ <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260" class="void-img" data-index="{{$loop->index}}" data-preview="{{ossUrl($item['preview_url'])}}" data-poster="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260">
|
|
|
</a>
|
|
|
</td>
|
|
|
<td>
|
|
|
@@ -214,6 +247,102 @@
|
|
|
$(document).ready(function() {
|
|
|
$('.grid-album:first').addClass('');
|
|
|
});
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ $('.video-hover-container').each(function() {
|
|
|
+ var $container = $(this);
|
|
|
+ var $img = $container.find('img');
|
|
|
+ $img.data('original-src', $img.attr('src'));
|
|
|
+ });
|
|
|
+
|
|
|
+ // Object to track load status using data-index as key
|
|
|
+ var loadIndexes = {};
|
|
|
+
|
|
|
+ $('.video-hover-container').on('mouseenter', function(e) {
|
|
|
+ e.preventDefault(); // Prevent link default behavior during hover
|
|
|
+ var $container = $(this);
|
|
|
+ var $img = $container.find('img');
|
|
|
+ var $link = $container.find('a');
|
|
|
+ var videoUrl = $img.data('preview');
|
|
|
+ var posterUrl = $img.data('poster');
|
|
|
+ var index = $img.data('index'); // Get the data-index value
|
|
|
+
|
|
|
+ // Initialize loadIndexes[index] if not set
|
|
|
+ if (!loadIndexes.hasOwnProperty(index)) {
|
|
|
+ loadIndexes[index] = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Create loading overlay
|
|
|
+ var $loading = $('<div>', {
|
|
|
+ class: 'loading-overlay',
|
|
|
+ css: {
|
|
|
+ position: 'absolute',
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ width: '100%',
|
|
|
+ height: '100%',
|
|
|
+ background: 'rgba(0,0,0,0.5)',
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ zIndex: 10
|
|
|
+ }
|
|
|
+ }).append('<div class="spinner"></div>');
|
|
|
+
|
|
|
+ // Create video element
|
|
|
+ var $video = $('<video>', {
|
|
|
+ src: videoUrl,
|
|
|
+ poster: posterUrl,
|
|
|
+ autoplay: true,
|
|
|
+ muted: true,
|
|
|
+ loop: true,
|
|
|
+ css: {
|
|
|
+ width: $img.width(),
|
|
|
+ height: $img.height(),
|
|
|
+ display: 'none' // Initially hidden until loaded
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (loadIndexes[index] === 0 && videoUrl != "") {
|
|
|
+ loadIndexes[index] = 1;
|
|
|
+ $container.css('position', 'relative');
|
|
|
+ $link.append($loading);
|
|
|
+ }
|
|
|
+
|
|
|
+ // When video can play
|
|
|
+ $video.on('canplay', function() {
|
|
|
+ if (loadIndexes[index] === 1) {
|
|
|
+ loadIndexes[index] = 2;
|
|
|
+ $loading.remove();
|
|
|
+ $img.hide();
|
|
|
+ $video.show();
|
|
|
+ $link.append($video);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // Maintain link functionality
|
|
|
+ $link.on('click', function(e) {
|
|
|
+ if ($video.is(':visible')) {
|
|
|
+ e.preventDefault(); // Prevent click when video is showing
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.video-hover-container').on('mouseleave', function() {
|
|
|
+ var $container = $(this);
|
|
|
+ var $img = $container.find('img');
|
|
|
+ var index = $img.data('index'); // Get the data-index value
|
|
|
+
|
|
|
+ if (loadIndexes[index] === 2 || loadIndexes[index] === 1) {
|
|
|
+ loadIndexes[index] = 0;
|
|
|
+ var $video = $container.find('video');
|
|
|
+ var $loading = $container.find('.loading-overlay');
|
|
|
+ $video.remove();
|
|
|
+ $loading.remove();
|
|
|
+ $img.show();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
