[fix] Video templates to use Video tag and sync (#1480)

* [fix] Video templates to use Video tag and sync

Author: hlomzik

label_studio/annotation_templates/videos/video-classification/config.xml

@@ -1,14 +1,13 @@
 <View>
-  <HyperText name="video" value="$video"/>
+  <Video name="video" value="$video"/>
   <Choices name="choice" toName="video" showInLine="true">
     <Choice value="Blurry" />
     <Choice value="Sharp" />
   </Choices>
 </View>
 
 <!-- {"data": {
- "video": "<video src='static/samples/opossum_snow.mp4' width=100% controls>",
- "videoSource": "/static/samples/opossum_snow.mp4"
+ "video": "/static/samples/opossum_snow.mp4"
 },
 "predictions": [{"result":
 [

label_studio/annotation_templates/videos/video-classification/config.yml

@@ -5,7 +5,7 @@ image: /static/templates/video-classification.png
 details: <h1>Classify video</h1>
 config: |
   <View>
-    <HyperText name="video" value="$video"/>
+    <Video name="video" value="$video"/>
     <Choices name="choice" toName="video" showInLine="true">
       <Choice value="Blurry" />
       <Choice value="Sharp" />
@@ -15,8 +15,7 @@ config: |
   <!-- {
 
   "data": {
-     "video": "<video src='static/samples/opossum_snow.mp4' width=100% controls>",
-     "videoSource": "/static/samples/opossum_snow.mp4"
+     "video": "/static/samples/opossum_snow.mp4"
   },
 
   "annotations": [{"result":

label_studio/annotation_templates/videos/video-timeline-segmentation/config.xml

@@ -1,21 +1,18 @@
 <View>
   <Header value="Video timeline segmentation via AudioPlus sync trick"/>
-  <HyperText name="video" value="$video"/>
+  <Video name="video" value="$video" sync="audio"/>
   <Labels name="tricks" toName="audio" choice="multiple">
     <Label value="Kickflip" background="#1BB500" />
     <Label value="360 Flip" background="#FFA91D" />
     <Label value="Trick" background="#358EF3" />
   </Labels>
-  <AudioPlus name="audio" value="$videoSource" speed="false"/>
+  <AudioPlus name="audio" value="$video" sync="video" speed="false"/>
 </View>
 
 <!--
-  It's very important to prepare task data correctly,
-  it includes HyperText $video and
-  it must be like this example below:
+  Audio tag uses the same $video file to be in sync, video is muted
 -->
 
 <!-- {
- "video": "<video src='/static/samples/opossum_snow.mp4' width=100% muted/><img src onerror=\"$=n=>document.querySelector(n);a=$('.ls-editor audio');v=$('video');a.onseeked=()=>{v.currentTime=a.currentTime};a.onplay=()=>v.play();a.onpause=()=>v.pause()\" />",
- "videoSource": "/static/samples/opossum_snow.mp4"
+ "video": "/static/samples/opossum_snow.mp4"
 } -->

label_studio/annotation_templates/videos/video-timeline-segmentation/config.yml

@@ -6,23 +6,20 @@ details: <h1>Select and classify video segments</h1>
 config: |
   <View>
     <Header value="Video timeline segmentation via AudioPlus sync trick"/>
-    <HyperText name="video" value="$video"/>
+    <Video name="video" value="$video" sync="audio"/>
     <Labels name="tricks" toName="audio" choice="multiple">
       <Label value="Kickflip" background="#1BB500" />
       <Label value="360 Flip" background="#FFA91D" />
       <Label value="Trick" background="#358EF3" />
     </Labels>
-    <AudioPlus name="audio" value="$videoSource" speed="false"/>
+    <AudioPlus name="audio" value="$video" sync="video" speed="false"/>
   </View>
 
   <!--
-    It's very important to prepare task data correctly,
-    it includes HyperText $video and
-    it must be like this example below:
+    Audio tag uses the same $video file to be in sync, video is muted
   -->
 
   <!-- {
-   "video": "<video src='/static/samples/opossum_snow.mp4' width=100% muted/><img src onerror=\"$=n=>document.querySelector(n);a=$('.ls-editor audio');v=$('video');a.onseeked=()=>{v.currentTime=a.currentTime};a.onplay=()=>v.play();a.onpause=()=>v.pause()\" />",
-   "videoSource": "/static/samples/opossum_snow.mp4"
+   "video": "/static/samples/opossum_snow.mp4"
   } -->