In the previous routines, we explored how to use the audio Previewwidget to play music in scope. In this article, we'll show you how to use video Previewwidget to play a video.
Let's start by downloading my routines in the previous article:
Https://github.com/liu-xiao-guo/scopetemplates_audio
In order to join the video previewwidget, I added the following sentences to our routines:
Query.cpp
r["VideoSource"] = "http://techslides.com/demos/sample-videos/small.mp4";
r["screenshot"] = Icons_[2].tostdstring ();
Here, we have added two "source" and "screenshot" in the video previewwidget. In practice, I found that if "screenshot" is not defined, the video will not be displayed and played correctly. The setting of this item is very important. Here we use a local image to display a screenshot of the video (albeit less precise).
Preview.cpp
In preview, we have modified our code as follows:
Result result = Previewquerybase::result ();
Previewwidget Listen ("tracks", "Audio");
{
Variantbuilder builder;
Builder.add_tuple ({
{"title", Variant ("This is the song title")},
{"Source", Variant (result["Musicsource"]. Get_string (). C_STR ())}
);
Listen.add_attribute_value ("Tracks", Builder.end ());
}
Previewwidget Video ("Videos", "video");
Video.add_attribute_value ("Source", Variant (result["VideoSource"].get_string (). C_STR ()));
Video.add_attribute_value ("screenshot", Variant (result["screenshot"].get_string (). C_STR ()));
Previewwidgetlist Widgets ({image, header, description});
if (result["Musicsource"].get_string (). Length ()! = 0) {
widgets.emplace_back (listen);
}
if (result["VideoSource"].get_string (). Length ()! = 0) {
widgets.emplace_back (video);
}
Reply->push (widgets);
To run our scope, we can see the following images:
When we click the Play button, it will automatically call the browser to play our video.
The source code of the whole project is: Https://github.com/liu-xiao-guo/scopetemplates_video