Recent changes to Example_Video_HTML5

Example_Video_HTML5 modified by Paolo Casaschi

Paolo Casaschi — Tue, 19 Jul 2016 14:06:07 -0000

--- v3
+++ v4
@@ -4,7 +4,7 @@

 You can add a similar page to your website or to a [chess blog](http://blog.casaschi.net/2011/03/pgn4web-integration-with-html5-video.html). 

-Example: <http: go.casaschi.net="" pgn4web-demo-video-ogg="">
+[Click here for an example](http://pgn4web.casaschi.net/video.html?headerDisplay=false&pgnData=carlsensvidler.pgn&videoUrl=http://pb.casaschi.net/carlsensvidlervideo&videoWidth=480&videoHeight=270&videoLoop=true).

 ### instructions

Example_Video_HTML5 modified by Paolo Casaschi

Paolo Casaschi — Thu, 21 May 2015 07:39:44 -0000

--- v2
+++ v3
@@ -8,7 +8,7 @@

 ### instructions

-The video integration is achieved using the `video.html` file with the appropriate parameters to select the youtube video. Browsing to `video.html?help=true` shows all the configuration options for `video.html`. 
+The video integration is achieved using the `video.html` file. Browsing to `video.html?help=true` shows all the configuration options for `video.html`. 

 `video.html` requires video timing information to be added to the PGN data. Here is an example of a PGN data for use with `video.html`: 

@@ -40,9 +40,7 @@

 Clock info ([`WhiteClock "3:02"]` header tag and `[%clk 3.03]` move comments) is optional. 

-pgn4web also integrates with [YouTube video](Example_Video_YouTube). 
-
-Please note, some older browser might not support this functionality. 
+Please note, some older browser might not support this functionality and the appropriate codec might be required for the browser to display the selected video depending on the video format.

 ### how to generate the video timing info

Example_Video_HTML5 modified by Paolo Casaschi

Paolo Casaschi — Sat, 14 Mar 2015 01:21:53 -0000

Example_Video_HTML5 modified by Anonymous

Anonymous — Sat, 14 Mar 2015 01:10:19 -0000

Example: HTML5 video integration

The pgn4web chessboard follows the game played in the HTML5 video.

You can add a similar page to your website or to a chess blog.

Example: http://go.casaschi.net/pgn4web-demo-video-ogg

instructions

The video integration is achieved using the video.html file with the appropriate parameters to select the youtube video. Browsing to video.html?help=true shows all the configuration options for video.html.

video.html requires video timing information to be added to the PGN data. Here is an example of a PGN data for use with video.html:

[Event "World Blitz Championship"]
[Site "Moscow RUS"]
[Date "2010.11.18"]
[Round "30"]
[White "Magnus Carlsen"]
[Black "Peter Svidler"]
[Result "1-0"]
[SetUp "1"]
[FEN "8/6k1/1R6/p2pBnP1/8/8/r7/6K1 b - - 6 62"]
[VideoTime "0.6"]

62... Kh7 {[%vt 3.5]}
63. g6 {[%vt 4.3]}
63... Kh6 {[%vt 5.7]}
64. g7 {[%vt 6.4]}
64... Kh7 {[%vt 7.2]}
65. Rb8 {[%vt 7.8]}
65... Nxg7 {[%vt 10.1]}
...

The [VideoTime "0.0"] tag specifies when during the video playback this game should be loaded. This is useful in case the video shows more than one game. Every game must have this tag (otherwise defaulting to zero).

The [%vt 18.5] comment specifies when during the video playback this move should be shown. Every move must have this comment info (otherwise defaulting to zero).

All video timing info (header tags and move comments) should be sequential through the PGN data, this means the first game of the video should be the first in the file and so on. If the video shows first game A, then game B, then game A again, the file should contain three games, with A as game number one and three.

Clock info ([WhiteClock "3:02"] header tag and [%clk 3.03] move comments) is optional.

pgn4web also integrates with YouTube video.

Please note, some older browser might not support this functionality.

how to generate the video timing info

video.html provides a facility to interactively add video timing information to the PGN.

Use the videoUrl=... and the pgnData=... URL options to specify your video and the associated PGN file. Then add the setupVideotimes=true option. In this mode, while the video is playing, clicking the capture button will add video timing info to the next game or move. After all games and moves have been updated with video timing info, you can copy the PGN data from the textbox for replacing your original PGN file.

step by step

have your chess video in a format supported by HTML5 video, for instance video.ogv
have the corresponding PGN data in file.pgn, optionally with clock information: [WhiteClock "xxx"] and [%clk yyy]
check the correctness of file.pgn for instance with pgn4web's board-generator.html
open video.html in setup mode with video.html?videoUrl=video.ogv&pgnData=file.pgn&setupVideotimes=true and progressively capture video timing info for each game and move
update the PGN data file.pgn with the addition of the video timing info [VideoTime "xxx"] and [%vt yyy]
publish your chess video as video.html?videoUrl=video.ogv&pgnData=file.pgn, optionally adding the videoHeight=xxx, videoWidth=yyy, videoAutoplay=false, videoLoop=true and horizontalLayout=false URL parameters