Skip to content

Commit 314c221

Browse files
dvij542dvij542
committed
Optimized for phone
1 parent 926d1f7 commit 314c221

4 files changed

Lines changed: 84 additions & 26 deletions

File tree

‎_site/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<body>
5050
<section class="hero-header has-background">
5151
<!-- run infinite loop of video -->
52-
<video poster="" id="tree" autoplay muted loop class="background-video">
52+
<video poster="" id="tree" muted loop class="background-video">
5353
<source src="static/videos/background.mp4" type="video/mp4">
5454
Your browser does not support the video tag.
5555
</video>
@@ -200,7 +200,6 @@ <h2 class="title is-3 has-text-centered">Skills deployed on hardware</h2>
200200
<div id="results-carousel1" class="carousel results-carousel">
201201
<div class="item item-video1">
202202
<video poster="" id="video1_" playsinline preload="none" controls muted loop height="100%">
203-
<!-- Your video file here -->
204203
<source src="static/videos/Hardware/Open_Drawer_GR.mp4"
205204
type="video/mp4">
206205
</video>

‎_site/static/js/index.js‎

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,24 +38,54 @@ $(document).ready(function() {
3838
var carousels = bulmaCarousel.attach('.carousel', options);
3939

4040
// Handle background video autoplay
41-
// var backgroundVideo = document.getElementById('tree');
42-
// if (backgroundVideo) {
43-
// if (autoplay) {
44-
// backgroundVideo.setAttribute('autoplay', '');
45-
// } else {
46-
// backgroundVideo.removeAttribute('autoplay');
47-
// }
48-
// }
49-
console.log('autoplay:', autoplay);
50-
// print some value so that I know it is working
41+
var backgroundVideo = document.getElementById('tree');
42+
if (backgroundVideo) {
43+
console.log('Background video found, setting autoplay:', autoplay);
44+
if (autoplay) {
45+
backgroundVideo.setAttribute('autoplay', '');
46+
backgroundVideo.setAttribute('preload', 'auto');
47+
console.log('Added autoplay to background video and set preload to auto');
48+
49+
// Try to play the background video programmatically as a fallback
50+
backgroundVideo.play().then(function() {
51+
console.log('Background video started playing successfully');
52+
}).catch(function(error) {
53+
console.log('Background video autoplay failed:', error);
54+
});
55+
} else {
56+
backgroundVideo.setAttribute('autoplay', '');
57+
backgroundVideo.setAttribute('preload', 'auto');
58+
console.log('Added autoplay to background video and set preload to auto');
59+
60+
// Try to play the background video programmatically as a fallback
61+
backgroundVideo.play().then(function() {
62+
console.log('Background video started playing successfully');
63+
}).catch(function(error) {
64+
console.log('Background video autoplay failed:', error);
65+
});
66+
}
67+
} else {
68+
console.log('Background video not found!');
69+
}
5170
// Handle carousel videos autoplay
5271
var carouselVideos = document.querySelectorAll('.carousel video');
5372
carouselVideos.forEach(function(video) {
54-
console.log('autoplay:', autoplay);
73+
console.log('Processing video, autoplay:', autoplay);
5574
if (autoplay) {
5675
video.setAttribute('autoplay', '');
76+
video.setAttribute('preload', 'auto'); // Change from 'none' to 'auto' for autoplay to work
77+
console.log('Added autoplay to video and set preload to auto');
78+
79+
// Try to play the video programmatically as a fallback
80+
video.play().then(function() {
81+
console.log('Video started playing successfully');
82+
}).catch(function(error) {
83+
console.log('Autoplay failed:', error);
84+
});
5785
} else {
5886
video.removeAttribute('autoplay');
87+
video.setAttribute('preload', 'none'); // Keep preload as 'none' when no autoplay
88+
console.log('Removed autoplay from video and set preload to none');
5989
}
6090
});
6191

‎index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<body>
5050
<section class="hero-header has-background">
5151
<!-- run infinite loop of video -->
52-
<video poster="" id="tree" autoplay muted loop class="background-video">
52+
<video poster="" id="tree" muted loop class="background-video">
5353
<source src="static/videos/background.mp4" type="video/mp4">
5454
Your browser does not support the video tag.
5555
</video>
@@ -200,7 +200,6 @@ <h2 class="title is-3 has-text-centered">Skills deployed on hardware</h2>
200200
<div id="results-carousel1" class="carousel results-carousel">
201201
<div class="item item-video1">
202202
<video poster="" id="video1_" playsinline preload="none" controls muted loop height="100%">
203-
<!-- Your video file here -->
204203
<source src="static/videos/Hardware/Open_Drawer_GR.mp4"
205204
type="video/mp4">
206205
</video>

‎static/js/index.js‎

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,24 +38,54 @@ $(document).ready(function() {
3838
var carousels = bulmaCarousel.attach('.carousel', options);
3939

4040
// Handle background video autoplay
41-
// var backgroundVideo = document.getElementById('tree');
42-
// if (backgroundVideo) {
43-
// if (autoplay) {
44-
// backgroundVideo.setAttribute('autoplay', '');
45-
// } else {
46-
// backgroundVideo.removeAttribute('autoplay');
47-
// }
48-
// }
49-
console.log('autoplay:', autoplay);
50-
// print some value so that I know it is working
41+
var backgroundVideo = document.getElementById('tree');
42+
if (backgroundVideo) {
43+
console.log('Background video found, setting autoplay:', autoplay);
44+
if (autoplay) {
45+
backgroundVideo.setAttribute('autoplay', '');
46+
backgroundVideo.setAttribute('preload', 'auto');
47+
console.log('Added autoplay to background video and set preload to auto');
48+
49+
// Try to play the background video programmatically as a fallback
50+
backgroundVideo.play().then(function() {
51+
console.log('Background video started playing successfully');
52+
}).catch(function(error) {
53+
console.log('Background video autoplay failed:', error);
54+
});
55+
} else {
56+
backgroundVideo.setAttribute('autoplay', '');
57+
backgroundVideo.setAttribute('preload', 'auto');
58+
console.log('Added autoplay to background video and set preload to auto');
59+
60+
// Try to play the background video programmatically as a fallback
61+
backgroundVideo.play().then(function() {
62+
console.log('Background video started playing successfully');
63+
}).catch(function(error) {
64+
console.log('Background video autoplay failed:', error);
65+
});
66+
}
67+
} else {
68+
console.log('Background video not found!');
69+
}
5170
// Handle carousel videos autoplay
5271
var carouselVideos = document.querySelectorAll('.carousel video');
5372
carouselVideos.forEach(function(video) {
54-
console.log('autoplay:', autoplay);
73+
console.log('Processing video, autoplay:', autoplay);
5574
if (autoplay) {
5675
video.setAttribute('autoplay', '');
76+
video.setAttribute('preload', 'auto'); // Change from 'none' to 'auto' for autoplay to work
77+
console.log('Added autoplay to video and set preload to auto');
78+
79+
// Try to play the video programmatically as a fallback
80+
video.play().then(function() {
81+
console.log('Video started playing successfully');
82+
}).catch(function(error) {
83+
console.log('Autoplay failed:', error);
84+
});
5785
} else {
5886
video.removeAttribute('autoplay');
87+
video.setAttribute('preload', 'none'); // Keep preload as 'none' when no autoplay
88+
console.log('Removed autoplay from video and set preload to none');
5989
}
6090
});
6191

0 commit comments

Comments
 (0)