I鈥檓 working on my portfolio website and I have a section where you can interact with book pages, each one representing a project I鈥檝e worked on. I鈥檓 trying to add a button in each page to activate a video corresponding each project. I鈥檝e been playing with the videoplayer sample and the iFrame sample and I still don鈥檛 know which one could work better for me.
路 Videoplayer is really straightforward. My only problem is that I can鈥檛 reproduce YouTube videos (CORS error).
路 IFrame was easy to set up, creating the HTML component on top of everything, and that鈥檚 not a problem for what I need. The only problematic situation using IFrame was when I tried to deactivate the object to change the book page (project) and be able to show another one. Is there any way to accomplish that?
I would appreciate your opinion and recommendation about the matter.
Let鈥檚 break down your situation with two approaches: the VideoPlayer and iFrame.
VideoPlayer Pros & Cons
Pros:
Straightforward to use within your Needle Engine project.
Generally good performance and control over video playback.
Cons:
CORS issues when trying to play YouTube videos, which is a common problem. This is usually due to restrictions on cross-origin requests imposed by the browser.
iFrame Pros & Cons
Pros:
Easy to set up, especially for directly embedding YouTube videos.
Flexibility with HTML components and can handle other video platforms readily.
Cons:
Can be tricky to manage visibility and state transitions when switching between book pages.
Recommendation for iFrame Management
To deactivate the iFrame when you switch book pages, you can manipulate the visibility using the DOM from your Needle Engine code. Here鈥檚 a pseudocode outline for your button functionality:
Define a button for each project which listens for a click event.
When clicked, hide the current iFrame, update its source to match the new project, then show it again.
Here鈥檚 a code example to manage the iFrame visibility:
import { Component } from "@needle-tools/engine";
class ProjectPageSwitcher extends Component {
constructor() {
super();
this.currentProject = '';
this.iframeElement = document.getElementById('videoIframe'); // Your iframe's ID
}
switchProject(projectUrl) {
if (this.currentProject !== projectUrl) {
this.iframeElement.style.display = 'none'; // Hide iframe
this.iframeElement.src = projectUrl; // Change to new project URL
this.currentProject = projectUrl;
// Show iframe again after changing the URL
setTimeout(() => {
this.iframeElement.style.display = 'block';
}, 100);
}
}
}
Conclusion
If you want to keep things simple and rely on YouTube, the iFrame might be preferable since it avoids CORS issues. However, if you want more control over playback features, consider working out the CORS problem with VideoPlayer (e.g., using a proxy).
Feel free to reach out for more detailed help on specific implementation parts or if there are other issues!
You can refer to the documentation for more insight on how to manipulate elements in Needle Engine to tailor this solution to your needs.
1 replies left - Get a PRO license for more AI replies. thread_dOOvtrNwTlSL4vkiso18COcf Reply to this message to continue the conversation
If I can solve the CORS problem, I prefer the VideoPlayer solution. Can you recommend any free servers where I can host my videos to get a functional URL to play the VideoPlayer?
To resolve the CORS issues while using the VideoPlayer, you can host your videos on platforms that allow cross-origin resource sharing (CORS). Here are a few free options you might consider:
Vimeo: They offer a free account option that allows for CORS-compliant video embedding.
Google Drive: You can host videos here, but ensure you set the correct sharing permissions to make them accessible via a direct link.
Dropbox: Similar to Google Drive, ensure that the folder is public, and get a direct streaming link to the video.
Archive.org: You can upload videos and get a URL that supports CORS.
Streamable: This service allows easy video hosting with CORS support.
Steps to Get Video URLs
Upload your video to any of these platforms.
Get the sharing link or direct link to the video after the upload completes.
Test the URL in a browser to ensure it鈥檚 publicly accessible (you might inspect the network requests in your browser鈥檚 developer tools for confirmation).
Example of Using VideoPlayer
Once you have a functioning URL, you can set it in your VideoPlayer component like this:
const videoPlayer = videoPlayerComponent; // Your VideoPlayer component reference
videoPlayer.src = 'YOUR_VIDEO_URL_HERE'; // Set video source
videoPlayer.play(); // Start playing the video
Using one of these hosting solutions should help eliminate CORS issues while using the VideoPlayer. Let me know if you need more information on any specific platform or further assistance!
0 replies left - Get a PRO license for more AI replies. thread_dOOvtrNwTlSL4vkiso18COcf Reply to this message to continue the conversation
Hi Albert_Duran, I鈥檓 sorry but I can鈥檛 help you right now. You have reached the maximum number of replies. . Please try again later or get a PRO license for more AI help.
**
Hello Albert, if you have the mp4 on disc you can just assign it to the video player. The video will be uploaded to your server during deployment. With Needle Engine 4 we have our own hosting solution which you can use to deploy to right from Unity so you don鈥檛 need to worry about it. You can upgrade to the alpha via Unity鈥檚 package manager (if you dont see it make sure to enable preview packages)
. Please try again later or