JavaScript Video Play Event

On 6 minutes, 13 seconds read By Edward
A picture of a transparent glass bowl to signify JavaScript Video Play Event

Create Video Play Event In JavaScript

To demonstrate, DOM event and styling with JavaScript, a new window will be opened in a new web browser window or tab.

Multiple windows can be opened and reused assuming that JavaScript is not disabled. JavaScript can be used to create events, inline styles or a internal or external styles.

JavaScript open() method can take optional parameters for the name, URL and window dimensions. Inline style attributes are inside HTML elements, Internal styles use a style element. The DOM event for this tutorial is the play method.

Common Syntax Of DOM Event Change In JavaScript

Glossary:

URL

Page to open.

Name

Target attribute or name of window.

Specs

Comm-separated list of items such as dimensions, location and scrollbars.

CSS

Cascading Style Sheets inherit properties and methods from the parent.

Event

Action triggered by user interaction of browser occurrence.

Common Methods For DOM Event

Ojamboshop.com Learning JavaScript DOM Event
Name Description Example
open() Create a new browser window. window.open();
style=”property:value” Inline Event. style=”color:blue;”
onplay Trigger a function when an video element has started. element.onplay = myFunc;
Name Description Example

JavaScript Video Play Event Snippet

// OjamboShop.com Learning JavaScript Video Play Event Tutorial

// Video Play Event
let nw = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");  

// New Window Content
let div = nw.document.createElement("div");
div.innerHTML = `
<p>Be sure to check out <a href="https://ojamboshop.com">OjamboShop.com</a> <span>for the courses and to leave a donation click <a href="https://ojambo.com/donate">here</a></span><p>
<video controls autoplay >
	<source src="https://ojamboservices.com/promotions/ojamboservices_2025_001.webm" type="video/webm">
</video>
<button class="play">Play</button>
<button class="pause">Pause</button>
<em></em>
<style>
	span { color: red; font-weight: bold; }
</style>
`;
let meta = nw.document.createElement("meta");
meta.httpEquiv = 'Content-Security-Policy';
meta.content = `default-src 'self'; script-src 'self' 'unsafe-inline'`;
//nw.document.head.appendChild(meta);
nw.document.body.appendChild(div);
nw.document.querySelectorAll("button").forEach(function(elem) {
	elem.addEventListener('click', function(evt) {
		let video = nw.document.querySelector('video');
		if ( elem.classList.contains('play') ) {
			video.play();
			nw.document.querySelector('em').innerHTML = `The video has started playing`;
		}
		else if ( elem.classList.contains('pause') ) {
			video.pause();
			nw.document.querySelector('em').innerHTML = `The video has paused playing`;
		}
	});
});

JavaScript DOM Event Code
OjamboShop.com Web IDE JavaScript Video Play Event Code

JavaScript DOM Event Result
OjamboShop.com Web IDE Displaying JavaScript Video Play Event Result


Usage

You can use any IDE or text editor and the web browser to compile and execute JavaScript code. For this tutorial, the OjamboShop.com Learning JavaScript Course Web IDE can used to input and compile JavaScript code for the open window Video Play Event.

Open Source

JavaScript follows the ECMAScript standard and is licensed under the W3C Software License by web browser vendors and runtime environment vendors. This allows commercial use, modification, distribution, and allows making derivatives proprietary.

Live Stream

Every Friday, you can join a live stream and ask questions. Check Ojambo.com for details and instructions.

Learn Programming Courses:

Get the Learning JavaScript Course for your web browser on any device.

OjamboShop.com Learning JavaScript Course
OjamboShop.com Learning JavaScript Interactive Online Course

Learn Programming Books:

Learning JavaScript Book is available as Learning JavaScript Paperback or Learning JavaScript Ebook.

OjamboShop.com Learning JavaScript Book Announcement
OjamboShop.com Learning JavaScript Ebook And Paperback Announcement

Conclusion:

JavaScript makes it easy to create DOM video play event styled content for new windows. New windows can be opened in the same window, as a new window or new tab.

If you enjoy this article, consider supporting me by purchasing one of my WordPress Ojambo.com Plugins or programming OjamboShop.com Online Courses or publications at Edward Ojambo Programming Books or become a donor here Ojambo.com Donate

References: