rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 15:53:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed video bug

Browse source
This commit is contained in:
liyunze 2024-08-03 11:20:05 +10:00
parent 69481bf6d6
commit e1a9f20d9b
1 changed files with 30 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/pages/projects.astro
View file

@ -20,20 +20,29 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5" class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
> >
<video <video
src="/videos/chess_opencv_demo.webm"
class="absolute max-w-full class="absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
border-2 border-solid border-white rounded-xl" border-2 border-solid border-white rounded-xl"
width="700"></video> width="700"
>
<source
src="/videos/chess_opencv_demo.webm"
type="video/webm"
/></video
>
<video <video
src="/videos/chess_opencv_demo.webm"
width="700" width="700"
class="playable absolute max-w-full class="playable absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
border-2 border-solid border-white rounded-xl" border-2 border-solid border-white rounded-xl"
></video> >
<source
src="/videos/chess_opencv_demo.webm"
type="video/webm"
/>
</video>
</div> </div>
<div <div
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start" class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
@ -189,19 +198,25 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
} }
</style> </style>
<script is:inline> <script is:inline lang="ts">
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const videos = document.querySelectorAll(".playable"); const videos = document.querySelectorAll(".playable");
videos.forEach((video) => { videos.forEach((video) => {
video.addEventListener("mouseenter", () => { // Ensure the video element supports play and pause methods
video.play(); if (
}); typeof video.play === "function" &&
typeof video.pause === "function"
) {
video.addEventListener("mouseenter", () => {
video.play();
});
video.addEventListener("mouseleave", () => { video.addEventListener("mouseleave", () => {
video.pause(); video.pause();
video.currentTime = 0; video.currentTime = 0;
}); });
}
}); });
}); });
</script> </script>