Assignment
In this assignment I learned to make HTML5 tags dynamic using JavaScript. I explored different HTML DOM elements I could use for my video. Once I figured that out I decided to use the below “if-else” statement (and not for or while) to sketch my self-portrait. Here is a person contained in a codec packed into a container in a browser.
if (time < 5) {
myvideo.width = time*100;
myvideo.height = time*100;
} else {
myvideo.width = 1000 - time*100;
myvideo.height = 1000 - time*100;
}Couple of errors I got - turned out to be a problem with the video conversion on VLC (used an online convertor to fix that). I thought it was a problem with my server. Not putting the words “id” in the video tag was the other problem.
Below are my thoughts on making the case FOR real-time stream.
Real-time stream
I’m going to bet FOR real-time stream. It’s probably not lived up to the grandeur that services like Klip, Color or Vine would have us believe, but that’s simply because it’s still evolving (it’s definitely not peaking at YouTube). Some of the real-time video services out there are relevant and cool, Prism (to get actionable data on your cameras), more cameras -> Dropcam, Google Glass and others connecting with “IoT”.
But, here’s where things will start to pivot:
- Streamed videos are very super specific to the person watching
- Live-feeds become a part of the work-place
Let’s say Slack - a communication tool for office teams starts a live-video feature. It’ll give the team-leader enormous power to inspire co-workers on topics that are relevant to their work in real-time. For example, she could step out and live user test their app and broadcast feedback. Other online services could adopt something like this too. For example UpWork could let freelancers broadcast the benefits of their earnings to their group of clients. Teachers in training or managers in corporations could use live-web tools to inspire their teams.
Live-Web in the workplace will keep videos on message, free of porn and monetizable.
Another thing we’ve seen is a push back on ubiquitous cameras streaming live. Invasion of Privacy for Google Glass was a huge issue that almost killed the product (I thought it would be people bumping into eachother). Copyright concerns (musicians, artists and broadcasters) got in the way too. These barriers need to be side-stepped (because they can’t be overcome). The way to do that is to make smarter algorithms to route live-video to relevant eyeballs. I HATE viral videos, I don’t care about Pandas playing in the snow. BUT I saw that bullshit because I am hostage to other peoples “likes”. I would rather have caught on to a funny-real-time moment that Louis CK had. But he probably didn’t beam it across because he knows if he does he’s exposing himself to too many irrelevant people. In a way, he compressed his 2 hour standup routine and put it online for $5, it’s a low-tech, present day version of what I’m saying.
Live-web shouldn’t compete for eyeballs, but relevant eye-balls. It will thrive that way.
Live code from first class - for documentation purposes
<!-- IMP IMP Assignment: go through codeacademy's javascript course OR JavaScript essential training. Don't spend 10 hours on it. Using audio and video elemnts inHTML/JavaScript, make a self portrait. Explore the audio video tags basically -->
<html>
<head>
<script type="text/javascript">
console.log("Debug Messages here")
var myname;
var thebutton;
var myvideo;
myname = "Shawn";
console.log(myname);
console.log(typeof myname);
myname = 10001;
console.log(myname);
console.log(typeof myname);
function init() {
var mydiv = document.getElementById("mydiv");
//document.body(); gets that
mydiv.innerHTML="Something Else";
mydiv2 = document.getElementById("additional");
thebutton = document.getElementById("button");
thebutton.addEventListener('click', buttonClicked);
myvideo = document.getElementById("thevideo");
myvideo.addEventListener('timeupdate', function(evt){
//console.log(evt);
console.log("Current time is:" + myvideo.currentTime);
if (myvideo.currentTime > 10) {
mydiv.style.visibility = "visible";
myvideo.currentTime = 9;
}
});
//in-line, anonymous inner function. JS functions are defined as variables
}
window.addEventListener('load', init);
//have to add our own EventListener as in p5 setup() does it
//hey broswer when you're done loading, run a function called init
//javascript is an event driven language
function buttonClicked(){
// alert("Hey! Stop That!");
thebutton.style.backgroundColor = "blue";
//thebutton.style.coloe = "blue";
//http://www.w3schools.com/cssref/
if (myvideo.pause){
myvideo.play();
} else {
myvideo.pause();
}
//something about VLC to save out video files in different formats. Other option is Miro Video Converter
}
</script>
</head>
<video = "thevideo" controls width="300">
<source src="http://itp.nyu.edu/~sve204/liveweb_spring2016/video.mp4" type="video.mp4">
<!-- mp4 derived from quicktime, mov, containter (contains video track, encoded H264). Audio has AAC encoding. They are Patent Encumbered by MPEGLA who charge browser manufacturers money for decoders. Google bought and opensourced the WEBM project -->
<source src="http://itp.nyu.edu/~sve204/liveweb_spring2016/video.ogg" type="video/ogg">
<!-- OGG theora is supported by firefox and completely opensource -->
</source>
</source>
</video>
<body>
Hello World
<div id="mydiv">
Here is some stuff
</div>
<div id="additional" style="visibility:hidden"> This is some additional content</div>
<button id="button">Click Me</button>
<!-- div is a block level HTML element -->
<!-- Inline elements are: span, bold etc -->
</body>
</html>