Courses/Design & Technique-Essential Web Design/Q2/06 - Revision history

Andre: /* video sources */

2018-11-29T10:09:46Z

video sources

← Older revision		Revision as of 10:09, 29 November 2018
Line 2:		Line 2:
	==video sources==		==video sources==
	https://archive.org/details/movies		https://archive.org/details/movies

			https://commons.wikimedia.org/wiki/Main_Page

	==Simple examples==		==Simple examples==

Andre at 12:27, 27 November 2018

2018-11-27T12:27:42Z

← Older revision		Revision as of 12:27, 27 November 2018
Line 1:		Line 1:
	~~= Revise html ids and class =~~
	~~http://codepen.io/PublicationStation/pen/eBNVZm~~

	~~http://codepen.io/PublicationStation/pen/mOJxqN~~

	~~=audio and video in HTML5=~~
	~~HMTL5 includes a standard way to embed audio and video tags, without the use of flash.~~

	~~Playing audio and video on the web is now easy and opens up a lot of possibilities audio-visual interaction and manipulation.~~



	==video sources==		==video sources==
	https://archive.org/details/movies		https://archive.org/details/movies

			==Simple examples==
			Video: https://codepen.io/PublicationStation/pen/rQZaLJ

			Audio: https://codepen.io/PublicationStation/pen/MOVgON

	~~==Simple examples==~~
	~~Video: https://codepen.io/PublicationStation/pen/MOVgON~~

	~~Audio: https://codepen~~.~~io/PublicationStation/pen/MOVgON~~		== video codecs and containers explained==
			Video file formats (.avi .mp4 .ogv .mkv) are containers to video and audio streams
			* Each '''video format''' allow specific audio and video codecs
			* '''codecs''' are the way by which a audio or video stream is encoded and decoded.

	~~== examples~~ video ~~element~~ with ~~CSS==~~		Current web browsers support:
	~~http://codepen.io/PublicationStation/pen/YpXKQa~~		* video format: '''.mp4''' with streams
			** '''video''' encoded with '''H264 codec'''
			** '''audio''' encodec with '''AAC''' (multichannel) or '''MP3''' (stereo) codecs


	~~http://codepen.io/PublicationStation/pen/PbqBdP~~

	==first, preparing your video files==		==first, preparing your video files==
	~~<span style="background:yellow">~~To be certain that your videos will play in all current browsers, you need to have videos in ~~'''~~.~~mp4 format.'''</span>~~		To be certain that your videos will play in all current browsers, you'll need to have your videos or audio encoded in the codecs above.

	There are several solutions to ~~convert video files to mp4 and audio to mp3.~~		There are several solutions to do this:
			* [https://handbrake.fr/ Handbrake]
	* [~~http~~://~~www.getmiro~~.~~com~~/ ~~Miro video converter~~] ~~seems to do it well.~~		* [http://www.mirovideoconverter.com/ Miro]
	* ~~https~~://~~video~~.~~online-convert~~.com/~~convert-to-mp4 converts the files online~~


Line 39:		Line 33:
	* Choose the Format menu:		* Choose the Format menu:
	** '''For a .mp4 video''' Video > <code>MP4</code>		** '''For a .mp4 video''' Video > <code>MP4</code>
			** '''For a .ogv video''' Video > <code>Ogg Theora</code>
	* Press the large button: "Convert to ..."		* Press the large button: "Convert to ..."
	Conversion will start. When it is done the new file will be saved.		Conversion will start. When it is done the new file will be saved.

	[[File:Miro Video Converter_005.png\|300px]]		[[File:Miro Video Converter_005.png\|300px]]

			===in Handbrake===
			See https://www.techspot.com/article/1131-hevc-h256-enconding-playback/


	== video tag ==		== video tag ==
Line 55:		Line 53:

	This is the simplest a web video player you can get.		This is the simplest a web video player you can get.


	A <nowiki><video></nowiki> tag encapsulating 1 <nowiki><source></nowiki> tag, that contains the same video mp4 file</nowiki>.		A <nowiki><video></nowiki> tag encapsulating 1 <nowiki><source></nowiki> tag, that contains the same video mp4 file</nowiki>.

	The argument <nowiki>controls</nowiki> make sure the video players has controls.		The argument <nowiki>controls</nowiki> make sure the video players has controls.


	==audio tag==		==audio tag==
Line 69:		Line 69:
	</audio>		</audio>
	</source>		</source>



	== video / audio tag attributes ==		== video / audio tag attributes ==
Line 89:		Line 91:
	</video>		</video>
	</source>		</source>


			== examples video element with CSS==

			http://codepen.io/PublicationStation/pen/YpXKQa

			http://codepen.io/PublicationStation/pen/PbqBdP






	=Audio & Video in Public Spaces =		=Audio & Video in Public Spaces =
Line 99:		Line 113:
	'''Build a web page with a video player, where:'''		'''Build a web page with a video player, where:'''
	* video plays automatically, loops and has a posts		* video plays automatically, loops and has a posts

Andre at 08:39, 21 November 2017

2017-11-21T08:39:30Z

← Older revision		Revision as of 08:39, 21 November 2017
Line 16:		Line 16:


	==Simple ~~example~~==		==Simple examples==
			Video: https://codepen.io/PublicationStation/pen/MOVgON

			Audio: https://codepen.io/PublicationStation/pen/MOVgON

			== examples video element with CSS==
	http://codepen.io/PublicationStation/pen/YpXKQa		http://codepen.io/PublicationStation/pen/YpXKQa

Andre at 09:00, 20 November 2017

2017-11-20T09:00:45Z

← Older revision		Revision as of 09:00, 20 November 2017
Line 24:		Line 24:
	<span style="background:yellow">To be certain that your videos will play in all current browsers, you need to have videos in '''.mp4 format.'''</span>		<span style="background:yellow">To be certain that your videos will play in all current browsers, you need to have videos in '''.mp4 format.'''</span>

	~~==prepare your~~ files==		There are several solutions to convert video files to mp4 and audio to mp3.
	~~As said previously:~~
	~~<span style="background:yellow">To be certain that your videos will play in all current browsers, you'll need~~ to ~~have videos in '''both .~~mp4 and ~~.ogv container formats.'''</span> In other words you need~~ to ~~encode your videos into these 2 formats~~.

	~~There are several solutions to do this, but~~ [http://www.getmiro.com/ Miro video converter] seems to do well~~, converting both to~~ .~~mp3 and~~ .~~ogg~~.		* [http://www.getmiro.com/ Miro video converter] seems to do it well.
			* https://video.online-convert.com/convert-to-mp4 converts the files online

	~~'''Online conversion: '''~~

	* '''to OGG http://video.online-convert.com/convert-to-ogg'''
	* '''to MP4 http://video.online-convert.com/convert-to-mp4'''


	~~'''Desktop conversion Miro from http://www.getmiro.com/download/'''~~
	===in Miro===		===in Miro===
	* Select the file you want to convert to .ogv and .mp4		* Select the file you want to convert to .ogv and .mp4
	* Choose the Format menu:		* Choose the Format menu:
	** '''For a .mp4 video''' Video > <code>MP4</code>		** '''For a .mp4 video''' Video > <code>MP4</code>
	** '''For a .ogv video''' Video > <code>Ogg Theora</code>
	* Press the large button: "Convert to ..."		* Press the large button: "Convert to ..."
	Conversion will start. When it is done the new file will be saved.		Conversion will start. When it is done the new file will be saved.
Line 53:		Line 46:
	<video controls>		<video controls>
	<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4" type="video/mp4">		<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4" type="video/mp4">
	~~<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv" type="video/ogg">~~
	</video>		</video>
	</source>		</source>
Line 59:		Line 51:
	This is the simplest a web video player you can get.		This is the simplest a web video player you can get.

	A <nowiki><video></nowiki> tag encapsulating 2 <nowiki><source></nowiki> ~~tags~~, ~~each containing~~ the same video ~~in the different formats <nowiki>~~mp4 ~~and ogv~~</nowiki>.		A <nowiki><video></nowiki> tag encapsulating 1 <nowiki><source></nowiki> tag, that contains the same video mp4 file</nowiki>.

	The argument <nowiki>controls</nowiki> make sure the video players has controls.		The argument <nowiki>controls</nowiki> make sure the video players has controls.
Line 70:		Line 62:
	<audio controls>		<audio controls>
	<source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.mp3" type="audio/mp3">		<source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.mp3" type="audio/mp3">
	~~<source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.ogg" type="audio/ogg">~~
	</audio>		</audio>
	</source>		</source>
Line 91:		Line 82:
	<video controls loop width=800 poster="http://static.ddmcdn.com/gif/tour-de-france-top-ways-the-race-has-changed-picnic-130619.jpg">		<video controls loop width=800 poster="http://static.ddmcdn.com/gif/tour-de-france-top-ways-the-race-has-changed-picnic-130619.jpg">
	<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4" type="video/mp4">		<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4" type="video/mp4">
	~~<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv" type="video/ogg">~~
	</video>		</video>
	</source>		</source>

	=Audio & Video in Public Spaces =		=Audio & Video in Public Spaces =
	* Janet Cardiff: [https://www.youtube.com/watch?v=Tgef5gel4sk ''Ghost Machine'' ]
	* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw ''Alter Bahnhof Video Walk'']
	* LUSTlab: [http://lust.nl/#projects-3478 ''Urban Echo'']		* LUSTlab: [http://lust.nl/#projects-3478 ''Urban Echo'']
	* Yoana Buzova [http://oyoana.com/leaveamessage Leave Message]
	* http://publicationstation.wdka.hro.nl/go-student/Q2/Beursplein/rules-video2.html		* http://publicationstation.wdka.hro.nl/go-student/Q2/Beursplein/rules-video2.html

Line 106:		Line 93:
	===#1 - video ===		===#1 - video ===
	'''Build a web page with a video player, where:'''		'''Build a web page with a video player, where:'''
	* video ~~contain both .ogv~~ and ~~.mp4 source video files~~		* video plays automatically, loops and has a posts



Line 136:		Line 122:
	<video id="testvideo" autoplay loop width=800 poster="http://static.ddmcdn.com/gif/tour-de-france-top-ways-the-race-has-changed-picnic-130619.jpg">		<video id="testvideo" autoplay loop width=800 poster="http://static.ddmcdn.com/gif/tour-de-france-top-ways-the-race-has-changed-picnic-130619.jpg">
	<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4" type="video/mp4">		<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4" type="video/mp4">
	~~<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv" type="video/ogg">~~
	</video>		</video>
	</div>		</div>

Andre: /* first, preparing your video files */

2017-11-20T08:49:45Z

first, preparing your video files

← Older revision		Revision as of 08:49, 20 November 2017
Line 22:		Line 22:

	==first, preparing your video files==		==first, preparing your video files==
	<span style="background:yellow">To be certain that your videos will play in all current browsers, you need to have videos in '''~~both~~ .mp4 ~~and .ogv formats~~.'''</span>		<span style="background:yellow">To be certain that your videos will play in all current browsers, you need to have videos in '''.mp4 format.'''</span>


	==prepare your files==		==prepare your files==

Andre: /* Video in Public Spaces */

2016-11-11T11:04:18Z

Video in Public Spaces

← Older revision		Revision as of 11:04, 11 November 2016
Line 96:		Line 96:
	</source>		</source>

	=Video in Public Spaces =		=Audio & Video in Public Spaces =
	* Janet Cardiff: [https://www.youtube.com/watch?v=Tgef5gel4sk ''Ghost Machine'' ]		* Janet Cardiff: [https://www.youtube.com/watch?v=Tgef5gel4sk ''Ghost Machine'' ]
	* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw ''Alter Bahnhof Video Walk'']		* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw ''Alter Bahnhof Video Walk'']

Andre: /* Simple example */

2016-11-08T15:22:08Z

Simple example

← Older revision		Revision as of 15:22, 8 November 2016
Line 18:		Line 18:
	==Simple example==		==Simple example==
	http://codepen.io/PublicationStation/pen/YpXKQa		http://codepen.io/PublicationStation/pen/YpXKQa

			http://codepen.io/PublicationStation/pen/PbqBdP

	==first, preparing your video files==		==first, preparing your video files==

Andre at 14:01, 8 November 2016

2016-11-08T14:01:45Z

← Older revision		Revision as of 14:01, 8 November 2016
Line 98:		Line 98:
	* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw ''Alter Bahnhof Video Walk'']		* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw ''Alter Bahnhof Video Walk'']
	* LUSTlab: [http://lust.nl/#projects-3478 ''Urban Echo'']		* LUSTlab: [http://lust.nl/#projects-3478 ''Urban Echo'']
			* Yoana Buzova [http://oyoana.com/leaveamessage Leave Message]
	* http://publicationstation.wdka.hro.nl/go-student/Q2/Beursplein/rules-video2.html		* http://publicationstation.wdka.hro.nl/go-student/Q2/Beursplein/rules-video2.html

Andre: /* Revise html ids and class */

2016-11-08T12:44:52Z

Revise html ids and class

← Older revision		Revision as of 12:44, 8 November 2016
Line 2:		Line 2:
	http://codepen.io/PublicationStation/pen/eBNVZm		http://codepen.io/PublicationStation/pen/eBNVZm

			http://codepen.io/PublicationStation/pen/mOJxqN

	=audio and video in HTML5=		=audio and video in HTML5=

Andre at 11:41, 8 November 2016

2016-11-08T11:41:44Z

← Older revision		Revision as of 11:41, 8 November 2016
Line 1:		Line 1:
			= Revise html ids and class =
			http://codepen.io/PublicationStation/pen/eBNVZm


	=audio and video in HTML5=		=audio and video in HTML5=
	HMTL5 includes a standard way to embed audio and video tags, without the use of flash.		HMTL5 includes a standard way to embed audio and video tags, without the use of flash.