1

How to get the video from document library and show or Display the video on HOME page using Rest API (Client-side only)

1
  • you can use a Media webpart
    – Gaurravs
    Jan 22, 2018 at 9:03

3 Answers 3

1

usehttps://jcrowleyapps.sharepoint.com/_api/web/GetFolderByServerRelativeUrl('/Shared%20Documents')/Files

0
0
$.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Videos')/Items(1)/FieldValuesAsHtml",
        method: "GET",
        async: false,
        headers: {
            "Accept": "application/json; odata=verbose"
        },
    success: function (data) {
        var result = ""; 
        var uploadvideo = data.d.VideoSetDefaultEncoding;
        var thumbnail = data.d.AlternateThumbnailUrl;
        var title = data.d.FileLeafRef;
        var myVid = $(uploadvideo).attr('href');
        var thumbnailURL=$(thumbnail).attr('href');

                    var html = '<div><div style="background-image:url(\'' + thumbnailURL + '\')"><a  href='+ myVid + ' target="_blank"></a></div></div>';

                    result = result + html;             
                    $(".videoplaceholder").html(result);    
    },
    error: function (data) {
        alert("Error : " + data);
    }
});

This way you will get the videos based on item id. If you want to provide play functionality, you can jwplayer.

3
  • I try this one but URL is not working "/_api/web/lists/getbytitle('Videos')/Items(1)/FieldValuesAsHtml"
    – Pradeep
    Jan 22, 2018 at 11:53
  • here you need to replace Videos with your listname and Items(1) is the itemid.
    – Deepmala
    Jan 22, 2018 at 14:19
  • /_api/web/lists/getbytitle('Document')/Items(1) up to here it is working remaining part (FieldValuesAs‌​Html) is not working
    – Pradeep
    Jan 23, 2018 at 3:29
0

Please check if below code snippet works for you. Just change the name of your list/document library, change Title of the video in filter and put this code in a content editor webpart.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/getByTitle('Documents')/items?$select=Title,File/ServerRelativeUrl&$filter=Title eq 'TestVideo'&$expand=File",
                method: "GET",
                async: false,
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
            success: function (data) {
                var html = ""; 
                var vidURL = _spPageContextInfo.webAbsoluteUrl + data.d.results[0].File.ServerRelativeUrl;
                html = '<source src="'+ vidURL +'" type="video/mp4">';
                $("#vidPlayer").append(html);    
            },
            error: function (data) {
                alert("ErrorMessage : " + data);
            }
        });

    });
</script> 

<div id="MyVideo"> 
    <video width="320" height="240" id="vidPlayer" controls="visible"> 
    </video>
</div>
2
  • 'TestVideo'&$expand=File (In place TestVideo i given my video name in place of file i given Library name) .
    – Pradeep
    Jan 23, 2018 at 3:30
  • dont replace File. Replace "Documents" with your library name and "TestVideo" with your video name(value of Title field): /_api/Web/Lists/getByTitle('<YourLibrary Name>')/items?$select=Title,File/ServerRelativeUrl&$filter=Title eq '<Your Video Name>'&$expand=File"
    – Sagar
    Jan 23, 2018 at 3:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.