Example_Video_HTML5

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.

Click here for an example.

instructions

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:

[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.

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

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

1. have your chess video in a format supported by HTML5 video, for instance video.ogv
2. have the corresponding PGN data in file.pgn, optionally with clock information: [WhiteClock "xxx"] and [%clk yyy]
3. check the correctness of file.pgn for instance with pgn4web's board-generator.html
4. 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
5. update the PGN data file.pgn with the addition of the video timing info [VideoTime "xxx"] and [%vt yyy]
6. 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