{"id":2879,"date":"2023-02-18T13:58:00","date_gmt":"2023-02-18T12:58:00","guid":{"rendered":"https:\/\/www.itidea.nl\/?p=2879"},"modified":"2023-04-21T14:03:41","modified_gmt":"2023-04-21T12:03:41","slug":"creating-seamless-video-galleries-with-new-stream-and-sharepoint-components","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/creating-seamless-video-galleries-with-new-stream-and-sharepoint-components\/","title":{"rendered":"Creating seamless Video Galleries with New Stream and SharePoint components"},"content":{"rendered":"\n

With the New Stream feature video content can be saved in a document library without the need for a dedicated portal like Classic Stream.
To reference a video on a SharePoint page the FileViewer component can be used.<\/p>\n\n\n\n

A custom video component displays videos from pages of a specific type as a beautiful video gallery, removing all other page content for a seamless viewing experience.
To accomplish this pages have to be loaded and per page the video has to be found by finding FileViewer components.
After the video component is found, the properties of the webpart have to be inspected to find the link to the video.<\/p>\n\n\n\n

When the video is stored in a OneDrive, accessing the video can be accomplished by using the ‘link’ property. Use this link in for example an iframe and the video will open in the New Stream environment for a high-quality viewing experience.<\/p>\n\n\n\n

For videos stored in a document library the ‘link’ property isn’t present, but a ‘file’ property provides direct access to the video content. While you won’t get the benefits of the New Stream environment, you’ll still be able to view and play the video content with ease.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a>
Video without New Stream environment<\/figcaption><\/figure>\n\n\n\n

To open video content in New Stream environment, simply visit:
[url\/_layouts\/15\/stream.aspx?id=[relative path to the video: \/sites\/sitename\/library\/video.mp4]
If the video is stored in a site other than the root, make sure to include the appropriate structure in the URL.<\/p>\n\n\n\n

Suppose the video is stored in \/sites\/dev-site in a library called MyLibrary the url must be like:
https:\/\/itidea.sharepoint.com\/sites\/dev-site\/_layouts\/15\/stream.aspx?id=\/sites\/dev-site\/MyLibrary\/<\/p>\n\n\n\n

\"\"<\/a>
Video with New Stream environment<\/figcaption><\/figure>\n\n\n\n

Since the video content stored in OneDrive has the ‘file’ property as well, this same property can be used at all situations.
Simplified code shows the steps:
First find the appropriate control
Check if it’s video content
Format the url so the content opens in the New Stream environment
Use the url is eg an iframe<\/p>\n\n\n

\nlet result = page.findControl((c) => {\n  if (c["title"] === "File viewer" || c["title"] === "File and Media viewer") {\n\tif (c.data.webPartData.properties.file.endsWith('.mp4')) {\n\t  srcUrl = c.data.webPartData.properties.webAbsoluteUrl + '\/_layouts\/15\/stream.aspx?id=' + c.data.webPartData.properties.file.replace('remove the tenant part', '');\n\t  return true;\n\t}\n\treturn false;\n  }\n  return false;\n});\nif (result) return `<iframe width="640" height="420" src="${srcUrl}" allowfullscreen style="border:none;"><\/iframe>`;\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
With the New Stream feature video content can be saved in a document library without the need for a dedicated portal like Classic Stream.To reference a video on a SharePoint page the FileViewer component can be used. A custom video … Read More »<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,41],"tags":[37],"class_list":["post-2879","post","type-post","status-publish","format-standard","hentry","category-office-365","category-sharepoint","tag-office365"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/2879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/comments?post=2879"}],"version-history":[{"count":1,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/2879\/revisions"}],"predecessor-version":[{"id":2880,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/2879\/revisions\/2880"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=2879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=2879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=2879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}