Skip to main content

Content linked to the video

Please see the following link for this example

We have made this example in react.

The code#

import React, {setState, useEffect, useState} from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
import { PrivacyPlayerPro } from '../privacy-player'
function content(props) {
if(props == 0){
return(
<layout>
<h1>Ready Set Rock 'n Roll interactive demo</h1>
<p>Contextual content will appear here when you start the video. This award winning documentary tells the tale of the very first live stream ever.</p>
<img src={'https://25yearsstreaming.com/wp-content/uploads/2019/10/header.jpg'} height={"357"} />
</layout>
)
}
if(props < 28){
return (
<layout>
<h1> Groningen in 1994</h1>
<p>Ready Set Rock 'n Roll is a documentary about the very first live stream in the world, in 1994. This stream was produced from the Simplon pop venue, Groningen.</p>
<img src={'https://upload.wikimedia.org/wikipedia/commons/0/07/SimplonGroningen.png'} height={'320'}/>
</layout>
)
}
if(props < 59){
return (
<layout>
<h1>Documentary</h1>
<p>This film was produced by film makers Alex Pitstra, Koen de Koning and Ismaël Lotz. Many people volunteerily contributed to this production.</p>
</layout>
)
}
if(props < 85){
return (
<layout>
<h1> Simplon</h1>
<p> Simplon was simply the place to be as youth in 1994 in Groningen, where young and creative people in music and media met and mixed up.</p>
</layout>
)
}
if(props < 120){
return (
<layout>
<h1>The rock scene of the Netherlands!</h1>
<p>Groningen is a student city, and had a vivid rock music scene back in the nineties. Almost everyone played in a band.</p>
<p>This documentary contains actual rare footage of Nirvana and Pearl Jam playing live in Vera, Groningen, before they became famous. </p>
<p>Fun fact: Kurt Cobain proposed to Courtney Love on the steps of the Vera venue.</p>
<img src={'https://www.vera-groningen.nl/content/uploads/old/photos/1991/nirvana.jpg'} height={'300'}/>
</layout>
)
}
if(props <156){
return (
<layout>
<h1> Boris Geheniau </h1>
<p>Boris started his music and internet careers in Simplon.</p>
<p>Boris is the founder of Fundament All Media. He loves playing the drums. He teaches at the REBS (Real Estate Business School).</p>
</layout>
)
}if(props <170){
return (
<layout>
<h1> Regina Broersma</h1>
<p>Regina is a photography and film artist. Like many other creatives and entrepreneurs, she started her career in Simplon.</p>
<img src={'https://pbs.twimg.com/media/DMvLVGnXkAEXTQ0?format=jpg&name=900x900'} style={{"height":"100%", "width": "100%"}}/>
</layout>
)
}if(props < 198){
return (
<layout>
<h1> Roger Muskee</h1>
<p>Roger is a professional video-producer. Roger studied at minerva, the fine arts academy in Groningen and also started his career in Simplon.</p>
</layout>
)
}if(props <210){
return (
<layout>
<h1> Stef van der Ziel</h1>
<p>Stef was one of the three guys involved in producing the very first live stream in the world.</p>
<p>This idea of Gerad Harens (video), Rudo de Jong (tech) and Stef (publicity) was born while drinking beer together in Simplon.</p>
<p>Stef successfully launched Jet-Stream.com as a company, with the mission to professionalize and scale the web for streaming.</p>
<img src={'https://stefvanderziel.files.wordpress.com/2018/04/40651956774_ea0f12f611_h.jpg?w=756&h=504'}/>
</layout>
)
}if(props < 255){
return (
<layout>
<h1>Marriage between internet and video</h1>
<p>Can you imagine life without video streaming? Nowadays you can simply pick up your phone and watch or start a stream. Back then it was assumed impossible. Fun fact: people at the bar laughed at the guys for their crazy idea. They did it anyway.</p>
</layout>
)
}if(props < 302){
return (
<layout>
<h1>The modem</h1>
<p>The first live stream ever was pushed out through an old fashioned Zoom 28.8K modem using a single dial up phone line. They used an Apple Macintosh Performa 630 with a built-in AV media capture card. The Mac grabbed video frames and uploaded them as fast as it could through the modem to the web server. A CGI script on the web server pushed the JPG images to the browsers using a just then introduced technology called HTTPKeepAlive. The images were refreshed inline. The concept of video is refreshing images. This ServerPushJPG technology later became very popular with webcams. These guys invented live video streaming.</p>
</layout>
)
}if(props < 340){
return (
<layout>
<h1> The result was the first live stream ever</h1>
<p>November 4 1994 was the date of the first live stream ever. Fun fact: the actual broadcast was planned for November 11, but they got it working on November 4, so they decided to just go live. They had 4 viewers. One frame per second. No audio. But it was live. A breakthrough.</p>
</layout>
)
}if(props < 380){
return (
<layout>
<h1>Who was the band?</h1>
<p>Nobody remembers the name of the band that was streamed. They were so focussed on getting the technology to work, that they had no idea which band was playing. It probably was a local band, since the stream was produced on a friday evening in the upper stage, where local bands would play in return for beer. Who was the band?</p>
</layout>
)
}if(props < 410){
return (
<layout>
<h1> Gerard and Hein</h1>
<p>Gerard and Hein basically lived in Simplon. They even had beer tanks named after them! Likely a huge honour we guess ;-) Fun fact: Simplon sold Dommelsch beer back then, it was called headache beer. It wasn't the best beer, but it was cheap.'</p>
</layout>
)
}if(props < 521){
return (
<layout>
<h1>European Music Festival</h1>
<p>Starting in 1995, the team started to live stream all the venues of the famous Eurosonic & Noorderslag music festivals. Hundreds of bands play here every year, in many venues and concert halls. The team of over 60 volunteers (media crew, tech crew, infra crew) produced many simultaneous live streams, interactive websites and on demand media.</p>
</layout>
)
}if(props < 586){
return (
<layout>
<h1> jeroen De Jong</h1>
<p> Jeroen is a musician, editor and director. Fun fact: Jeroen never lost his interest in metal music, he plays in a fanfare band playing metal covers on festivals.</p>
<img src={'https://www.poparchiefgroningen.nl/afbeeldingen/fotos/jeroen-de-jong/image_preview'}/>
</layout>
)
}
if(props < 629){
return (
<layout>
<h1> Osdorp Posse</h1>
<p>Osdorp Posse was the first Dutch rap group, a very energetic band. They started in 1989 and kept going until 2009.</p>
</layout>
)
}
if(props < 700){
return (
<layout>
<h1>A battery of encoders</h1>
<p>To stream all the different venues at the same time they used 8 computers. They built a network of miles and miles of audio, intercom, video and networking cables in the venues.</p>
</layout>
)
}if(props < 735){
return (
<layout>
<h1>Internet was not mainstream</h1>
<p>When tv crews arrived, they demanded stage priority over these internet kids with their cameras. Nowadays, nobody watches TV anymore. Yeah, your parents maybe.</p>
</layout>
)
}if(props < 760){
return (
<layout>
<h1>Dial-up</h1>
<p>Dial-up is a form of Internet access that uses telephone networks to establish a connection to an Internet service provider (ISP) by dialing a telephone number on a conventional telephone line. Modems decode audio signals into data to send to a router or computer, and encode signals from the latter two devices to send to another modem. </p>
<p>Dial up was invented in 1979, and is still sometimes used in low tech areas all over the world.</p>
</layout>
)
}if(props < 805){
return (
<layout>
<h1>Wrong number</h1>
<p>The telephone exchange caused unstable connections. The team asked for direct connections but forgot to remove the 0 in their encoders. As a result, calls were not made to the local internet provider, but to South America. Eight times a minute. Fact: the video mentions French Guyana. But they mean Guyana. They wanted to call XS4ALL in Assen (0592), but they dialed 00592.</p>
</layout>
)
}
if(props < 840){
return(
<layout>
<h1>They broke the internet</h1>
<p>In 1996 and 1997 their live streams became so popular that the streaming servers filled up the entire internet backbone, effectively breaking the Internet in the Netherlands. After this incident they came up the idea to put servers inside multiple internet provider networks, so that the viewers could watch the streams locally instead of over the internet. This method is still used widely today by Content Delivery Networks.</p>
</layout>
)
}
if(props < 900){
return (
<layout>
<h1>Jet-Stream, The inventors of streaming</h1>
<p>Stef founded Jet-Stream.com to help telcos and broadcasters to deploy large scale streaming infrastructures. Today, Jet-Stream works for hundreds of European professional streaming customers and is still innovating ahead of the industry.</p>
<img src={'https://jet-stream.com/wp-content/uploads/2015/10/background.png?id=3421'} height={'300'}/>
</layout>
)
}
if(props < 930){
return (
<layout>
<h1> The entrepreneurial city</h1>
<p>Groningen is the youngest city in Europe. Young people already live in the future. They create the future.</p>
<p>With so many students and universities, the city offers the ideal ingredients to launch a digital company.</p>
<p>According to FoundedInGroningen.com There have been more than 300 successful startups in groningen over the past few years. </p>
</layout>
)
}if(props < 1040){
return(
<layout>
<h1>But who was the band?</h1>
<p>So we know about when the first live stream was produced. And by whom. And we learned how they did it. But who was the band?</p>
</layout>
)
}
if(props < 1100){
return(
<layout>
<h1>The tape</h1>
<p>Luckily Regina saved many tapes with concert recordings from Vera and Simplon. She brought the tapes to GAVA, the city archive. They found the tape of November 4 1994!</p>
</layout>
)
}
if(props < 1140){
return(
<layout>
<h1>The AMP</h1>
<p>The film makers researched which band was playing, that night of the very first live stream ever: The AMP. The AMP was a local Friesian band. This band was active between 1988 and 1995, they dismantled the band in its final year due to all not really having fun on stage anymore.</p>
<p>The documentary closes with the actual recording of November 4, 1994. Fun fact: the editor slowly scales down the size and frame rate of the video, mimicking the experience of the live stream viewers, back in 1994.</p>
<img src={'data:image/jpeg;base64,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'}/>
</layout>
)
}
else {
return (
<layout>
<h1>Thanks for watching this interactive demo</h1>
<p> We hope thay you enjoyed this short documentary and this interactive demo of Jet-Stream Privacy Player Pro. Read out the timing of the player and you can change the context on your website: slides, frames, overlays, colours, social media: share your creativity, not your data. You can find all the code of this example on the documentation page. This example was made by the Jet-Steam development team.</p>
</layout>
)
}
}
class VideoComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.player = new PrivacyPlayerPro(
"https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6.smil&type=streaming&service=wowza&sub=readysetrocknroll6_EN.vtt,readysetrocknroll6_NL.vtt&output=player&events=1",
document.querySelector("#VideoComponent"), false, true
)
this.player.position_callback = (position) => this.props.positionCallback(position);
}
shouldComponentUpdate(nextProps, nextState) {
return false;
}
render () {
return <div id={"VideoComponent"} />
}
}
function main() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const [progress, setProgress] = useState(0)
function positionCallback(position) {
setProgress(position)
}
return (
<Layout
title={`Interactive Example`}
description="Description will go into a meta tag in <head />">
<div>
<div className={styles.divstyle}>
<div>
<VideoComponent key={'Video'} positionCallback={positionCallback} />
</div>
</div>
<div className={styles.divstyle2}>
<div>
{content(progress)}
</div>
</div>
</div>
</Layout>
);
}
export default main;