I've been asked to embed several locally hosted videos into a SharePoint Foundation 2010 site. Since Foundation 2010 appears to lack the standard Media WebPart found in other versions of SharePoint, I'm trying to use a local install of video.js (v5.11.6) implemented through a Content Editor WebPart. I'm a bit out of my depth here, but I'm reasonably confident I have the install and the html correct because my html5 code works as expected (control bar loads, video preloads, does not autoplay, etc.) when built directly in an htm file hosted on SharePoint and launched in Chrome (v52).
<script>
<link href=".../Style%20Library/video.js/video-js.css" rel="stylesheet"></link>
<script type="text/javascript" src=".../Style%20Library/video.js/video-js.swf/video.js"></script>
<div style="width:740;height:416;overflow-x:hidden;overflow-y:hidden;">
<video id="Data Cleansing" class="video-js vjs-default-skin vjs-big-play-centered" controls preload = 'auto' width="740" height="416" poster=".../FACT/SiteAssets/SitePages/Data%20Cleansing/ Poster.jpg" data-setup="{}">
<source src=".../FACT/SiteAssets/SitePages/Data%20Cleansing/Video.mp4" type='video/mp4' />
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</video>
</div>
</script>
When this same code is added to the Content Editor WebPart in SharePoint 2010 Foundation and viewed on the SharePoint page in Chrome, however, the controls don't load as expected with the video. The video itself still loads correctly, but the controls must be added via right click menu, "Show Controls". Once this is done, the video can be played as normal.
What is preventing the controls from loading in Chrome as expected on SharePoint? Or am I going about this the wrong way and is there a simpler means of embedding video in SharePoint Foundation 2010 (without access to the Media WebPart)?
For anyone dealing with a similar issue, I found a general html5 workaround that seems to do it. The problem was in the video tag. It looks like this solution is applicable for both SharePoint 2010 and 2013.
<video id="Data Cleansing" class="video-js vjs-default-skin vjs-big-play-centered" controls = "controls" preload = 'auto' width="740" height="416" poster=".../FACT/SiteAssets/SitePages/Data%20Cleansing/ Poster.jpg" data-setup="{}">
Related
This bothers me for a few days, and I couldn't get it solved. Please if you have seen this before, kindly let me know what the issue is. Thanks.
I have included the following two lines to the SharePoint 2013 master page:
<link href="http://vjs.zencdn.net/5.11.7/video-js.css" rel="stylesheet"/>
<script src="http://vjs.zencdn.net/5.11.7/video.js"></script>
Here is the HTML code generated from a SharePoint API call (it is a webpart):
<video id='my-video' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='none' data-setup='{}'>
<source src='test.flv' type='video/x-flv'/>
<p class='vjs-no-js'>To view this video please enable JavaScript, and consider upgrading to a web browser that<a href='http://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a></p>
</video>
Result in IE 11 and Chrome 53.0.2785.143. Click on the square button, it plays the FLV file perfectly, just the initial play button and buttons on the control are displaying incorrectly.
Play Button doesn't display correctly:
http://i.stack.imgur.com/DSY8R.png
Button on the control doesn't display correctly:
http://i.stack.imgur.com/EvK3g.png
I can answer the question myself:
<link href="http://vjs.zencdn.net/4.7/video-js.css" rel="stylesheet"/>
<script src="http://vjs.zencdn.net/4.7/video.js"></script>
Version 4.7 seems to be working fine in SharePoint 2013
hello I have embedded vimeo video in my website. It is showing accurately when view the website on desktop but it is not showing up on mobile. Here is the link of the website
http://bit.ly/1KtFBbq
Please any one has the idea whats wrong here.?
You have to be a pro member for vimeo to generate mobile versions automatically
Seems like you are using flash to play the video. This is not supported in many browsers and mobile. Better user HTML tags.
<video id="my_video" controls class="pull-left hideit">
<source src="thesource.mp4" type="video/mp4" />
</video>
They are best supported. Cheers!
I have several video-js player code on a web page like this:
<video id="vid1" class="video-js vjs-default-skin" width="140" height="120"
controls poster="/1video/countdown.jpg" data-setup='{}'>
<source src="/video/test.mp4" type="video/mp4" />
</video>
And this in the header:
<link href="/video-js-4.12.5/video-js/video-js.css" rel="stylesheet">
<script src="/video-js-4.12.5/video-js/video.js"></script>
<script>videojs.options.flash.swf = "/video-js-4.12.5/video-js/video-js.swf"</script>
What do I need to add so the players appear in IE8? Any help will be appreciated.
Unfortunately, Internet Explorer 8 does not support the <video/> tag that you are using.
Source
Update
video.js should fall back to Flash when loaded in a browser that does not support HTML5 video (e.g. IE 8). There could be several reasons why yours is not working:
Ensure that poster image is set
Use a self hosted version of video.js rather than the CDN. Then ensure that your path to video-js.swf is accurate within the JS file
Ensure that your flash plugin is up-to-date
No. 2 might be most pertinent to your issue. I see that in your header you attempt to change an option. Perhaps try removing that and just ensure that the file path in video.js is accurate (open the JS file and search for video-js.swf).
I am creating a video watching system with the HTML5 video tag. I have one problem and I don't know if the problem is because of my code or of Google Chrome.
Everything works fine until I try to drag the timeline bar or volume bar. Can anybody please help me? The problem is that the moment I click and unclick it does not stop dragging the bar around. So when I drag and leave it, it doesn't stop dragging. I have tried everything like clicking around but the only thing that worked was when I reload the page.
My code:
<video controls width="640" height="264" poster=""><source src="uploads/video1.mp4" />To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</video>
I Don't think your code is having any issue, It might be because of the type of mp4 file you are using.
Please use following piece of your code working perfectly fine (I have used different mp4 source file)
<video controls width="320" height="264" poster="">
<source src="http://www.w3schools.com/html/movie.mp4" />
To view this video please enable JavaScript, and consider upgrading to a web browser
that supports HTML5 video
</video>
this is my first question in stackoverflow so pardon me for mistakes.
I've been trying to create a simple CMS using videojs in which user could upload their video and customize their attributes (eg: autoplay, loop and controls).
When they change the attributes I will automatically recreate the whole tags and reinitialized it. I did this so it gave the correct preview especially on firefox since user will upload mp4 and firefox will give the "not supported" warning sign if I did not reinitialize it (videojs will automatically converts into flash).
Now the problem is when user checked the "autoplay" attributes because when I initialize the video it will automatically plays and I don't want that kind of behavior in the CMS (though I want that behavior in the published site).
I've been trying to pause the player once it was ready but it still plays.
My hypothesis is that the command to pause was fired before the command to play from the autoplay attributes.
This is the html tag used for this
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
And this is the one I used to initialize and pause the video
_V_(example_video_1).ready( function() {
var myplayer = this;
myplayer.pause();
});
Any idea? Help is greatly appreciated. Worst case if all else fails I could use different tags for the preview and published site (no autoplay for the preview). I create a fiddle for this : http://jsfiddle.net/F8JhL/2/
EDIT: I noticed that sometimes the pause event really works though not automatically (about 1 to 2 second after the video plays) but more often it doesn't work at all.
I find the same issue when using version 4.1.0 of videojs. When I upgrade to version 5.1.0 this conflict is missing.
You could download the latest version at https://github.com/videojs/video.js/releases
So I think this bug has been fix (but I can't find the commit revision for this fix).