vp-outstream-player
Version:
Outstream video player with Google IMA integration
411 lines (364 loc) • 10.6 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Outstream Player</title>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Merriweather:wght@400;700&display=swap"
rel="stylesheet"
/>
<!-- <script src="https://unpkg.com/vp-outstream-player@1.0.4/dist/vpOutstreamPlayer.umd.js"></script> -->
<script src="dist/vpOutstreamPlayer.umd.js"></script>
<style>
/* Reset and Base Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Merriweather", serif;
/* Serif font for body text */
line-height: 1.8;
background-color: #fdfdfd;
/* Slightly off-white background */
color: #333;
display: flex;
justify-content: center;
padding: 0 1rem;
/* Add horizontal padding for smaller screens */
}
/* Main Container */
.container {
}
/* Article Content Styling */
article {
padding: 2.5rem 3rem;
/* Generous padding inside the article */
}
/* Header/Title Area */
header {
margin-bottom: 1.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 1.5rem;
}
h1 {
font-family: "Inter", sans-serif;
/* Sans-serif for headings */
font-weight: 700;
font-size: 2.5rem;
/* Larger headline */
line-height: 1.2;
margin-bottom: 0.5rem;
color: #1a1a1a;
/* Darker heading color */
}
.meta-info {
font-family: "Inter", sans-serif;
font-size: 0.9rem;
color: #777;
margin-bottom: 1.5rem;
}
.meta-info span {
margin-right: 1rem;
}
/* Hero Image */
figure.hero-image {
margin: 0 -3rem 2rem -3rem;
/* Extend image to container edges, add bottom margin */
position: relative;
/* For potential captions overlay */
}
figure.hero-image img {
display: block;
/* Remove extra space below image */
width: 100%;
height: auto;
/* Maintain aspect ratio */
max-height: 450px;
/* Limit image height */
object-fit: cover;
/* Cover the area nicely */
}
figure.hero-image figcaption {
font-family: "Inter", sans-serif;
font-size: 0.8rem;
color: #888;
text-align: center;
padding: 0.5rem 3rem;
/* Add padding matching article */
background-color: #f9f9f9;
/* Slight background for caption */
}
/* Paragraphs and Text */
p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
/* Slightly larger body text */
color: #444;
/* Slightly softer text color */
}
p:last-child {
margin-bottom: 0;
}
strong {
font-weight: 700;
/* Merriweather bold */
}
em {
font-style: italic;
/* Merriweather italic */
}
a {
color: #007bff;
/* Standard link blue */
text-decoration: none;
transition: color 0.2s ease;
}
a:hover,
a:focus {
color: #0056b3;
text-decoration: underline;
}
/* Add ::before pseudo-element if player div is empty before JS loads */
#player:empty::before {
content: "Ad Player Loading...";
display: block;
text-align: center;
}
/* Subheadings */
h2 {
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 1.8rem;
line-height: 1.3;
margin-top: 2.5rem;
margin-bottom: 1rem;
color: #222;
}
/* Blockquotes */
blockquote {
margin: 2rem 0;
padding: 1rem 1.5rem;
border-left: 4px solid #007bff;
/* Accent border */
background-color: #f8f9fa;
/* Slight background tint */
font-style: italic;
color: #555;
}
blockquote p {
margin-bottom: 0.5rem;
/* Adjust paragraph spacing within quote */
}
blockquote cite {
display: block;
text-align: right;
margin-top: 0.5rem;
font-style: normal;
font-family: "Inter", sans-serif;
font-size: 0.9rem;
color: #777;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
article {
padding: 2rem 1.5rem;
/* Reduce padding on smaller screens */
}
h1 {
font-size: 2rem;
}
figure.hero-image {
margin: 0 -1.5rem 1.5rem -1.5rem;
/* Adjust negative margin */
}
figure.hero-image figcaption {
padding: 0.5rem 1.5rem;
}
p {
font-size: 1rem;
}
h2 {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
body {
padding: 0;
/* Remove body padding on very small screens */
}
.container {
margin: 0;
/* Remove container margin */
border-radius: 0;
/* Remove border radius */
box-shadow: none;
/* Remove shadow */
}
article {
padding: 1.5rem 1rem;
/* Further reduce padding */
}
h1 {
font-size: 1.8rem;
}
figure.hero-image {
margin: 0 -1rem 1.5rem -1rem;
/* Adjust negative margin */
}
figure.hero-image figcaption {
padding: 0.5rem 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<article>
<header>
<h1>Groundbreaking Discovery Could Reshape Our Understanding of the Cosmos</h1>
<div class="meta-info">
<span>By Alex Thompson</span>
<span>Published on <time datetime="2025-04-15">April 15, 2025</time></span>
</div>
</header>
<figure class="hero-image">
<img
src="https://picsum.photos/seed/cosmos/800/400"
alt="Abstract image representing the cosmos or a nebula"
/>
<figcaption>
An artist's impression of the newly observed cosmic phenomenon. Image: Galaxy Studios
</figcaption>
</figure>
<p>
<strong
>In a stunning turn of events, astronomers today announced the detection of a previously
unknown celestial structure</strong
>
that challenges long-held theories about galaxy formation. The discovery, made using the
advanced capabilities of the Webb Space Telescope combined with novel data analysis
techniques, provides compelling evidence for processes scientists hadn't previously
thought possible.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<div class="player-container">
<div id="player"></div>
</div>
<h2>Unveiling the Unexpected</h2>
<p>
The research team, led by Dr. Evelyn Reed at the Institute for Advanced Stargazing, spent
months verifying the data. "We were initially skeptical," Dr. Reed admitted in a press
conference. "The signals were unlike anything predicted by current models. It took
rigorous cross-checking and simulations to confirm we weren't looking at an artifact."
</p>
<blockquote>
<p>
"This finding opens up entirely new avenues for research. It's not just adding a detail;
it might require us to rethink fundamental aspects of cosmic evolution."
</p>
<cite>— Dr. Kenji Tanaka, Astrophysicist</cite>
</blockquote>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam
varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis
sollicitudin mauris. Integer in mauris eu nibh euismod gravida.
</p>
<p>
Further observations are already planned using multiple ground-based and space
observatories to gather more data on this enigmatic structure. The implications could
range from minor adjustments to existing theories to a complete paradigm shift in
cosmology. Read the full study in <a href="#">Nature Astronomy</a>.
</p>
</article>
</div>
<script>
const testConfig = {
// video: {
// url: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
// loop: true,
// debug: false,
// },
ads: {
adBreaks: [
{
adTagUrl: [
"https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
"https://example.com/vast2.xml", // Example fallback
],
},
{
adTagUrl: [
"https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
"https://example.com/vast2.xml", // Example fallback
],
},
// {
// adTagUrl: [
// "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
// "https://example.com/vast2.xml", // Example fallback
// ],
// },
],
adCycleDelayMs: 3 * 1000,
adRetryLimit: 2,
adCycleRestartMs: 5 * 1000,
},
config: {
skin: {
icons: {
default: "#fff",
hover: "#ededed",
},
},
hideWhenNoAd: true,
viewableThreshold: 0.5,
autostartOnViewable: {
state: true,
},
autopauseOnViewable: {
state: false,
},
startMuted: true,
size: {
width: 640,
height: 360,
},
responsive: false,
debug: true,
},
};
const player = vpOutstreamPlayer("player");
player.setup(testConfig);
if (typeof vpOutstreamPlayer === "function") {
try {
} catch (error) {
console.error("Error initializing vpOutstreamPlayer:", error);
// Optionally display an error message to the user in the #player div
const playerDiv = document.getElementById("player");
if (playerDiv) {
playerDiv.textContent = "Error loading video player.";
playerDiv.style.backgroundColor = "#ffdddd"; // Indicate error visually
playerDiv.style.color = "#d8000c";
}
}
} else {
console.error("vpOutstreamPlayer library not found.");
const playerDiv = document.getElementById("player");
if (playerDiv) {
playerDiv.textContent = "Video player library failed to load.";
playerDiv.style.backgroundColor = "#ffdddd";
playerDiv.style.color = "#d8000c";
}
}
</script>
</body>
</html>