class IzmotionVideo extends HTMLElement {
constructor() {
super();
this.entryId = this.getAttribute("entry-id") || "";
this.partnerId = this.getAttribute("partner-id") || "-4";
this.autoPlay = this.hasAttribute("autoplay");
this.isMuted = this.hasAttribute("muted");
this.showControls = this.hasAttribute("controls");
this.enableQualitySelector = this.hasAttribute("quality-selector");
this.showVolumeIcon = this.hasAttribute("volume-control") && !this.showControls; // Hide volume icon if controls are enabled
this.showTitle = this.hasAttribute("show-title");
this.loopVideo = this.hasAttribute("loop");
this.showWatermark = this.hasAttribute("watermark");
this.attachShadow({ mode: "open" });
}
connectedCallback() {
if (!this.entryId) {
console.error("IzmotionVideo: Missing entry-id attribute.");
return;
}
this.loadVideo();
}
async loadVideo() {
const apiUrl = `https://videos.izmotion.com/html5/html5lib/v2.41/mwEmbedFrame.php?&wid=_${this.partnerId}&uiconf_id=23448254&cache_st=1740121249&entry_id=${this.entryId}&playerId=kaltura_player&ServiceUrl=https%3A%2F%2Fvideos.izmotion.com&CdnUrl=https%3A%2F%2Fvideos.izmotion.com&ServiceBase=%2Fapi_v3%2Findex.php%3Fservice%3D&UseManifestUrls=true&forceMobileHTML5=true&urid=2.41&callback=mwi_kalturaplayer0`;
try {
const response = await fetch(apiUrl);
const textData = await response.text();
const jsonString = textData.replace(/^mwi_kalturaplayer0\(/, "").replace(/\);?$/, "");
// Extract entryResult
const startIdx = jsonString.indexOf("\\\"entryResult\\\":");
const endIdx = jsonString.indexOf("};\\n\\/*\\t\\t\\t if(window['parent']){\\n");
if (startIdx === -1 || endIdx === -1) {
console.warn("IzmotionVideo: No 'entryResult' found in response.");
return;
}
const entryJsonString = "{" + jsonString.substring(startIdx, endIdx) + "}";
const entryData = JSON.parse(entryJsonString.replaceAll("\\", ""));
const videoTitle = entryData.entryResult?.meta?.name || "Untitled Video";
const flavors = entryData.entryResult?.contextData?.flavorAssets || [];
this.renderVideoPlayer(videoTitle, flavors);
} catch (error) {
console.error("IzmotionVideo: Error fetching Kaltura entryResult:", error);
}
}
renderVideoPlayer(videoTitle, flavors) {
this.shadowRoot.innerHTML = `
${videoTitle}
`;
const video = this.shadowRoot.querySelector("video");
const qualitySelector = this.shadowRoot.querySelector("#qualitySelector");
const volumeIcon = this.shadowRoot.querySelector("#volumeIcon");
const volumeToggle = this.shadowRoot.querySelector("#volumeToggle");
flavors.sort((a, b) => a.bitrate - b.bitrate);
let sources = [];
flavors.forEach(flavor => {
const flavorId = flavor.id;
const flavorUrl = `https://videos.izmotion.com/p/${this.partnerId}/sp/${this.partnerId}00/playManifest/entryId/${this.entryId}/flavorId/${flavorId}/format/url/protocol/http`;
sources.push({ url: flavorUrl, bitrate: flavor.bitrate });
if (sources.length === 1) {
const source = document.createElement("source");
source.setAttribute("src", flavorUrl);
source.setAttribute("type", "video/mp4");
video.appendChild(source);
}
});
sources.forEach((source, index) => {
const option = document.createElement("option");
option.value = source.url;
option.textContent = `${source.bitrate} kbps`;
if (index === 0) option.selected = true;
qualitySelector.appendChild(option);
});
qualitySelector.addEventListener("change", function () {
const selectedUrl = this.value;
const currentTime = video.currentTime;
video.src = selectedUrl;
video.play();
video.currentTime = currentTime;
});
// Handle volume control (toggle mute)
const updateVolumeIcon = () => {
volumeIcon.innerHTML = video.muted ? this.getMuteIcon() : this.getUnmuteIcon();
};
volumeToggle.addEventListener("click", () => {
video.muted = !video.muted;
updateVolumeIcon();
});
updateVolumeIcon();
}
getMuteIcon() {
return `
`; // Muted Icon with Cross
}
getUnmuteIcon() {
return `
`; // Unmuted Icon
}
}
customElements.define("izmotion-video", IzmotionVideo);