Videos in Sharepoint

​Playing videos in sharepoint is bit tricky. Specially when you want to play videos with certain start and stop conditions as well as on all devices and on all browsers!

Problem:

Requirement was as follows:

Dynamic poster image should be displayed and on clicking on image, dynamic video should play and after playback completes, again poster image should be displayed.

Should Work on: IE8,IE9+,Chrome,FireFox,Safari(For Mac & Windows)

Devices: Both PC and Mobile devices

Attached is the excel which contains various approach taken and problems with implmenting approach on various devices.

VideoTags

Resolution:

YouTube videos were embedded into code with help of YouTubePlayer API.

https://developers.google.com/youtube/iframe_api_reference​​

Following is sample code which can be tested in CEWP in sharepoint :

<script type=”text/javascript”>

function onYouTubePlayerAPIReady() {

var player = new YT.Player(‘divStartPlayer’, {

height: ‘555’,

width: ‘1000px’,

videoId: ‘hsfUNRRu0VY’,

events: {

‘onReady’: onPlayerReady,

‘onStateChange’: onPlayerStateChange

}

});

}

function onPlayerReady(event) {

if (!(navigator.userAgent.indexOf(‘iPad;’) > 0))

{

event.target.playVideo();

}

}

//Function to be called after video playback is completed

function onPlayerStateChange(event) {

if(event.data === 0) {

ShowHideVideo();

}

}

</script>

<div id=”divStartPlayer” ></div>

Notes:

1) videoId​ is the ID of YouTube video

For Eg. YouTube video link looks like this

www.youtube.com/watch?v=hsfUNRRu0VY

here, hsfUNRRu0VY is the ID of video

2) Note the code navigator.userAgent.indexOf(‘iPad;’) > 0 in onPlayerReady

function. Reason for placing such condition is that iOS does not support auto

playback of videos. (Check below link for reference)

iOS Auto-Playback disabled

So, if code contains method for playing videos, video will not load at all in iOS devices.​

 

 

Advertisements