Discussions

 View Only
  • 1.  stream quickbase video file attachment

    Posted 05-29-2019 13:33
    I'm working on adding a custom button that will be present in a embedded record, and when this button is clicked, it will open a pop up and stream the video attachment in that same record.

    I'm having issues with having the click event tracking the embedded button, and the actual notation for the source link for the video.

    any help would be greatly appreciated.

    Thanks in advance.


  • 2.  RE: stream quickbase video file attachment

    Posted 07-12-2019 21:14
    You can use the iframe technique from the magic buttons app.

    create a formula rich text field, [iframe], and give it the following code:
    "<video src = " & URLRoot() &"up/"& Dbid() &"/a/r"& [Record ID#]&"/e9/v0\" width=\"500\" controls>\n</video>"

    substitute the 9 in 'e9' for the field ID# of your attachment field.




    create a report link field, [link], and set the field relationship as follows:


    In my example the app name is QB Developer Resources and the table name is Tests; set the relationship to match your app and table name.

    Next add the link field to your form and it will display the video and the user can play the video on the form.




    This function also works for your table views (here both videos were playing simultaneously):




  • 3.  RE: stream quickbase video file attachment

    Posted 07-15-2019 13:22
    Hey Adam, yes those will work to have the video/file/image showing in a field...
    My usage isn't in an actual itself, but actually shows as a pop up when the button is clicked.
     


  • 4.  RE: stream quickbase video file attachment

    Posted 07-15-2019 13:41
    Glad its working for you. I wonder if the pop up is a web browser setting? I use Chrome with default settings and it plays in the form or in the table.


  • 5.  RE: stream quickbase video file attachment

    Posted 07-15-2019 13:49
    Nope, the popup is custom HTML code I wrote myself. It's the user experience we were looking for.


  • 6.  RE: stream quickbase video file attachment

    Posted 07-15-2019 14:02
    Nice. Good job. Do you mind sharing the code for reference?


  • 7.  RE: stream quickbase video file attachment

    Posted 07-15-2019 16:30
    I can give snippets to help point you in the right direction... Can't give all due to IP...

    Basically, Rich Text field which makes a button with Launch as a class... gives the record ID as a dataset paramater

    JS Code page with event handler for a.Launch...

    API call to get the File URL:

    API_DoQuery&clist=a&query={'3'.EX.'<record ID>'}&fmt=structured

    the fmt=structured gives the properties of the fields, not just the data... the file attachment fields will have a child element of "url" this is the link for the file attachment.

    var file =  (Request.responseXML.documentElement.getElementsByTagName("url"))[0].innerHTML;
    var extension = file.substring(file.lastIndexOf('.')+1, file.length);

    I'm then able to add html code based on extension of the file...

    Eample:
    if(extension === "mp4"){document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'}
    With the elements now created, add CSS to get them how you wish... I have these set to display:none as default...

    Then function to actually show elements:

    function lightbox_open() {  var lightBoxVideo = document.getElementById("VideoLauncher");  window.scrollTo(0, 0);  document.getElementById('light').style.display = 'block';  document.getElementById('fade').style.display = 'block';  try{lightBoxVideo.play();}catch{}}
    And have another function for lightbox_close() to handle getting out of the pop up view...