利用video PreviewWidget在Ubuntu Scope中播放video

在先前的例程中，我们探讨了如何利用audio PreviewWidget在Scope中播放音乐。在这篇文章中，我们将介绍如何使用video PreviewWidget来播放一个video。

我们首先来下载我在上一篇文章中的例程：

https://github.com/liu-xiao-guo/scopetemplates_audio

为了加入video PreviewWidget，我在我们的例程中加入了如下的句子：

query.cpp

r["videoSource"] = "http://techslides.com/demos/sample-videos/small.mp4";
r["screenshot"] = icons_[2].toStdString();

在这里，我们加入了video PreviewWidget中必须的两项“source"及“screenshot”。在实践中，我发现如果没有定义“screenshot”，该视频将不会被正确显示和播放。这一项的设定非常重要。在这里我们利用了一个我们本地的图片来显示该视频的一个截图（尽管不太精确）。

preview.cpp

在Preview中，我们修改了我们的代码如下：

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 );

运行我们的Scope，我们可以看到如下的图片：







当我们点击播放按钮时，它会自动调用浏览器来播放我们的视频。

整个项目的源码在：https://github.com/liu-xiao-guo/scopetemplates_video