{"id":8395,"date":"2021-11-15T11:34:26","date_gmt":"2021-11-15T16:34:26","guid":{"rendered":"https:\/\/www.rushworth.us\/lisa\/?p=8395"},"modified":"2021-11-15T11:45:52","modified_gmt":"2021-11-15T16:45:52","slug":"exporting-microsoft-stream-transcripts-with-timecode-urls","status":"publish","type":"post","link":"https:\/\/www.rushworth.us\/lisa\/?p=8395","title":{"rendered":"Exporting Microsoft Stream Transcripts with Timecode URLs"},"content":{"rendered":"\n

I’d created a couple of quick code snippets to export Microsoft Stream transcripts & someone asked if you could include a way for users to click on a hyperlink and pop into the video at the right spot for the line in the transcript they clicked. Seemed like a good idea — I’ve searched though my meeting transcript & now I want to see\/hear that important part in the original video. <\/p>\n\n\n\n

The method I’m using to grab the transcript text actually grabs a LOT of information that’s thrown into an object being called ‘t”:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

I was only using t.eventData.text to build my transcript. What do you need in order to create a jump-to-this-timecode URL for a Stream video? I had no idea! Luckily, MS supplied an easy answer — if you share a video, one of the options is to start the video at a specific time. If you pass in “st” (which I assume stands for ‘start time’) and the number of seconds ( (17 * 60) + 39 = 1059, so the 17:39 from my video matches up with 1059 seconds in the st)<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

We still need the unique ID assigned to the video, but … I’m exporting the transcript from MS’s Stream site, which includes the ID in the URL. So I’m able to use window.location.href to get the URL, then strip everything past the ? … now I’ve got a way to create timecoded links to video content. I just need to glom that into the code I am using to export the transcript. <\/p>\n\n\n\n

Question is … how to display it to the user? Clicking on a link for 1059 seconds doesn’t really mean anything. If I were doing this at work, I might pass the number of seconds through a “pretty time” function to convert that number of seconds back into hour:minute:second format so the user clicks on 17:39 … but, as a quick example, this builds hyperlinks with the integer number of seconds as text:<\/p>\n\n\n

\nvar strURL = window.location.href;\nstrURLBase = strURL.substring(0, strURL.indexOf('?'));\n\nvar arrayTranscriptionLines = window.angular.element(window.document.querySelectorAll('.transcript-list')).scope().$ctrl.transcriptLines.map((t) => { \n\tvar strTimecodeURL = '<a href="' + strURLBase + '?st=' + t.startSeconds + '">' + t.startSeconds + '<\/a>'\n\treturn strTimecodeURL + "&nbps;&nbps;&nbps;&nbps;" + t.eventData.text;\n});\nconsole.log(arrayTranscriptionLines);\n<\/pre><\/div>\n\n\n
I might also just link the transcript text<\/em> to the appropriate URL. Then clicking on the text “I want you to remember this” would jump you to the right place in the video where that line occurs:<\/p>\n\n\n
\nvar strURL = window.location.href;\nstrURLBase = strURL.substring(0, strURL.indexOf('?'));\n\nvar arrayTranscriptionLines = window.angular.element(window.document.querySelectorAll('.transcript-list')).scope().$ctrl.transcriptLines.map((t) => { \n\tvar strResult = '<a href="' + strURLBase + '?st=' + t.startSeconds + '">' + t.eventData.text + '<\/a>'\n\treturn strResult;\n});\nconsole.log(arrayTranscriptionLines);\n<\/pre><\/div>\n\n\n
And we’ve got hyperlinked text that jumps to the right spot:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"
I’d created a couple of quick code snippets to export Microsoft Stream transcripts & someone asked if you could include a way for users to click on a hyperlink and pop into the video at the right spot for the line in the transcript they clicked. Seemed like a good idea — I’ve searched though …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[677],"tags":[45,856,729,713,265,1329],"class_list":["post-8395","post","type-post","status-publish","format-standard","hentry","category-office-365","tag-coding","tag-javascript","tag-microsoft-office-365","tag-microsoft-stream","tag-office-365","tag-web-coding"],"_links":{"self":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/8395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8395"}],"version-history":[{"count":2,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/8395\/revisions"}],"predecessor-version":[{"id":8403,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/8395\/revisions\/8403"}],"wp:attachment":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}