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.
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.
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.
file.pgn
, optionally with clock information: [WhiteClock "xxx"]
and [%clk yyy]
file.pgn
for instance with pgn4web's board-generator.html
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 file.pgn
with the addition of the video timing info [VideoTime "xxx"]
and [%vt yyy]
video.html?videoUrl=video.ogv&pgnData=file.pgn
, optionally adding the videoHeight=xxx
, videoWidth=yyy
, videoAutoplay=false
, videoLoop=true
and horizontalLayout=false
URL parameters
Wiki: Examples_Templates
Wiki: Features_Limitations_Bugs
Wiki: Index