Monthly Archives: March 2025

accessibility, information, tutorial, Video Creation

Embedding Video into a webpage or brightspace… from Google Drive

Leave a comment

So, as is normal, there are different ways to tackle embedding video using systems here at SBU. I’m just going to look at google drive embeds.  When you embed a video, it plays right there in the page, not something you have to click on which then opens up a new page or downloads the video to view it.  Like this:

(BTW – this video I am using in this demonstration was made via copilot as I outlined in the previous blog post.)

So how did I do that?  One usually won’t just drop a video into this blog site, as it will likely be too big.  So the first thing I did after making the video, is drop it into my google drive. Make sure you share it to anyone that has the link or anyone at SBU as appropriate.

The thing is, the embed code from google drive is a wee bit hidden.  You have to click on the three dots next to the file name, open it in a new tab, then click the three dots above the player area and then at the very bottom of the menu you can find the embed code.  You will need to highlight and copy the code out from there.

Now that you have the embed code, what next?  Well, here in the blog I switch from a Visual View to a Text view, and that shows me the html for the page and I just copy it in.  It might look a little scary, but right after you paste, you can switch right back to the Visual Mode and safety.

In Brightspace, you go to the area you want to have the video,  find this icon:

the "insert stuff" icon from the wysiwyg menu in brightspace.

This is the “insert stuff” button which can be found in just about any text entry window where you can format the text.

List of the stuff you can insert. Embed Code is at the bottom.

Enter Embed Code is at the bottom

this shows the interface where you paste the embed code.

Paste in your code and hit next.  It gives me a warning that you are getting media from another site.  Click Allow. Click Insert.  I got that warning again, and I told it to allow it again.  And now it looks like this:

screenshot showing the video embedded into a brightspace page.

Google Drive auto captions the videos that you put in the drive. (You should still check and edit them.)

You do not get all the same engagement tools and analytics that you get in echo360  embedding, but I felt that this was still worth sharing.

 

 

 

 

 

AI

Video from the Copilot page

1 Comment

I went to https://copilot.microsoft.com/

And then I saw this option on the side.  It says Visual Creator

list of clickable options on the right side of the page [copilot, Agents, Visual Creator, Get Agents, Create an agent]

New sample prompts come up including “Create a video with stock media.”

My Prompt:

show a video about safety when using a drill

This was produced in short order:

and when I was on that page still and I clicked to open the video, it opens in this editor called ClipChamp.

This is a screenshot of the clipchamp GUI.

So – that’s cool.

 

 

Uncategorized

Gemini Feature boost – Canvas

Leave a comment

What is that Canvas thingy? (screenshot of the prompt entry box with a new button.If you have been using ChatGPT, you may have already seen this feature there, but Gemini has added a “canvas” to it’s potential workflow.  The canvas is a separate “frame” or space on the page that gets updated as you work on whatever is in it with Gemini, without it scrolling up and away as you progress.  I’ve mostly used it for things like code, but you can totally use it for working on a draft of a regular written object, like an essay, speech, screenplay, etc.

To activate it, you will want to open https://gemini.google.com/app.  

Once there tell it what you want to work on – I’ll think of something on the simple side.  Here is my prompt:

I would like to write a small app that lets me know that everything will be alright. I want it to suggest a nice quote and also ask me if I want to hear some soothing music. Can you help me write that?

Then, I want to use the new canvas feature.  This requires that you click the button in the chat/prompt window that says “canvas”  Now my screen looks like this:

a screenshot of gemini running a "canvas". It shows the chat area in thr left and a new coding window or frame on the right.

It even has a preview mode!

screenshot of the preview mode on the code it wrote.

I’m going to ask it to change how the music is selected. At this stage it is asking me to link it to the music from my own drive. I want it to find it on the internet for me.

Can you change it so that you find the music on the internet for me? Tell me what you selected and ask if I want to hear it?

It created some code that uses an API to retrieve the music, and because I don’t feel like fussing with that I have it rewrite the code one more time to play music without the need of a API.   It tells me I really should use the API, but gives me what I wanted anyway.  lol  This is the result:

shows a screenshot of the updated canvas window and chat with gemini.

preview:  (the preview is fully functional)

preview of the code as a functional app.

It doesn’t sound like Calming ocean waves” but it is fun music.  Eventually I got sick of the synthy fun and asked it to find more appropriate music.  Here is the code.  You can copy it into a text/notepad app and save it as a html file if you want to play it in the browser on your computer

https://drive.google.com/file/d/1HtllluclKKzucMunkwVQ6kpSAaxLBtYr/view?usp=sharing

There is another feature “audio overview”.  If you’ve used NotebookLM, I’m sure you’ve already seen it.  They are bringing it to regular Gemini, but I don’t personally see it yet, so I believe it isn’t fully rolled out yet.

 

Have fun!

 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Everything Will Be Alright</title>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap” rel=”stylesheet”>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
font-family: ‘Inter’, sans-serif;
overflow: hidden; /* Prevent scrollbars during animation */
}
#canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.container {
background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 80%;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.3);

}
h1 {
color: #333;
margin-bottom: 20px;
font-size: 2em;
}
p {
color: #555;
font-size: 1.1em;
line-height: 1.6;
margin-bottom: 25px;
}
button {
padding: 12px 25px;
border: none;
border-radius: 6px;
background-color: #4CAF50; /* Green */
color: white;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
font-family: ‘Inter’, sans-serif;
}
button:hover {
background-color: #367c39; /* Darker green */
}
#music-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
flex-direction: column; /* Stack items vertically */
}

#play-music {
padding: 12px 25px;
border: none;
border-radius: 6px;
background-color: #007BFF; /* Blue */
color: white;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
font-family: ‘Inter’, sans-serif;
}

#play-music:hover {
background-color: #0056b3; /* Darker blue */
}

#music-controls {
display: none; /* Initially hide the controls */
flex-direction: column;
align-items: center;
margin-top: 10px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(5px);
}

#music-controls button {
margin: 5px;
padding: 8px 16px;
border: none;
border-radius: 6px;
background-color: #4CAF50; /* Green */
color: white;
font-size: 0.9em;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: ‘Inter’, sans-serif;
}

#music-controls button:hover {
background-color: #367c39; /* Darker green */
}

#volume-control {
width: 100px;
margin: 10px 0;
}

#music-info {
margin-bottom: 10px;
font-size: 0.9em;
color: #555;
}

</style>
</head>
<body>
<canvas id=”canvas”></canvas>
<div class=”container”>
<h1>Everything Will Be Alright</h1>
<p id=”quote”>Loading a reassuring quote…</p>
<div id=”music-container”>
<p id=”music-info”>Finding soothing music…</p>
<button id=”play-music” style=”display:none;”>Play Soothing Music</button>
</div>
<div id=”music-controls”>
<button id=”pause-music”>Pause</button>
<button id=”resume-music”>Resume</button>
<label for=”volume-control”>Volume:</label>
<input type=”range” id=”volume-control” min=”0″ max=”1″ step=”0.01″>
</div>
</div>
<script>
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let stars = [];
const numStars = 200;

function initializeStars() {
stars = [];
for (let i = 0; i < numStars; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 2,
color: `rgba(255, 255, 255, ${Math.random() * 0.5 + 0.5})`, // Varying opacity
speedX: (Math.random() – 0.5) * 0.2, // Subtle movement
speedY: (Math.random() – 0.5) * 0.2
});
}
}

function drawStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
stars.forEach(star => {
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fillStyle = star.color;
ctx.fill();
ctx.closePath();

// Update star position for subtle animation
star.x += star.speedX;
star.y += star.speedY;

// Wrap around edges
if (star.x > canvas.width) star.x = 0;
if (star.x < 0) star.x = canvas.width;
if (star.y > canvas.height) star.y = 0;
if (star.y < 0) star.y = canvas.height;
});
}

function animateStars() {
drawStars();
requestAnimationFrame(animateStars);
}

initializeStars();
animateStars();

window.addEventListener(‘resize’, () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initializeStars(); // Re-initialize stars on resize for proper distribution
});

const quoteElement = document.getElementById(‘quote’);
const quotes = [
“This too shall pass.”,
“Every cloud has a silver lining.”,
“You are stronger than you think.”,
“The best is yet to come.”,
“Breathe. You’re going to be okay. Breathe and remember that you’ve been in this place before. You’ve been this uncomfortable and anxious and scared, and you’ve survived. Breathe and know that you can survive this too. These feelings can’t break you. They’re painful and exhausting, but they can’t break you. You’re going to be okay.”
];

function displayQuote() {
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
quoteElement.textContent = randomQuote;
}

displayQuote();
setInterval(displayQuote, 10000); // Change quote every 10 seconds

const playMusicButton = document.getElementById(‘play-music’);
const audio = new Audio();
const musicControls = document.getElementById(‘music-controls’);
const pauseMusicButton = document.getElementById(‘pause-music’);
const resumeMusicButton = document.getElementById(‘resume-music’);
const volumeControl = document.getElementById(‘volume-control’);
const musicInfo = document.getElementById(‘music-info’);

let isPlaying = false;
let selectedTrack = null; // Store the selected track URL

// Simulate an online search for music without an API
function searchForSoothingMusic() {
const tracks = [
{ title: “Relaxing Piano Music”, url: “https://www.bensound.com/royalty-free-music/track/rainy-day-lo-fi-jazz” },
{ title: “Gentle Rain Sounds”, url: “https://www.soundjay.com/buttons/sounds/rain-01a.mp3” },
{ title: “Calming Ocean Waves”, url: “https://www.soundjay.com/buttons/sounds/ocean-wave-01.mp3” },
{ title: “Soft Ambient Music”, url: “https://www.bensound.com/bensound-music/bensound-acousticbreeze.mp3” },
{ title: “Peaceful Flute Music”, url: “https://www.soundjay.com/buttons/sounds/flute-c-note.mp3” },
];

setTimeout(() => {
selectedTrack = tracks[Math.floor(Math.random() * tracks.length)];
musicInfo.textContent = `Found: “${selectedTrack.title}”. Would you like to hear it?`;
playMusicButton.textContent = “Play Music”;
playMusicButton.style.display = ‘inline-block’;
}, 2000);
}

searchForSoothingMusic();

playMusicButton.addEventListener(‘click’, () => {
if (selectedTrack) {
audio.src = selectedTrack.url;
musicControls.style.display = ‘flex’;

if (isPlaying) {
audio.pause();
isPlaying = false;
playMusicButton.textContent = “Resume Music”;
} else {
audio.play().then(() => {
isPlaying = true;
playMusicButton.textContent = “Pause Music”;
}).catch(error => {
console.error(“Playback failed:”, error);
alert(“Failed to play music. There may be an issue with the selected audio source.”);
isPlaying = false;
playMusicButton.textContent = “Play Music”;
});
}
} else {
alert(“No music track selected.”);
}
});

pauseMusicButton.addEventListener(‘click’, () => {
if (isPlaying) {
audio.pause();
isPlaying = false;
playMusicButton.textContent = “Resume Music”;
}
});

resumeMusicButton.addEventListener(‘click’, () => {
if (!isPlaying) {
audio.play().then(() => {
isPlaying = true;
playMusicButton.textContent = “Pause Music”;
}).catch(error => {
console.error(“Playback failed:”, error);
alert(“Failed to resume music.”);
isPlaying = false;
playMusicButton.textContent = “Play Music”;
});
}
});

volumeControl.addEventListener(‘input’, () => {
audio.volume = volumeControl.value;
});

audio.addEventListener(‘ended’, () => {
isPlaying = false;
playMusicButton.textContent = “Play Music”;
});

</script>
</body>
</html>