I've been unable to get the YouTube plugin working with videoJS. I have what I believe is the latest versions of video.js and vjs.youtube.js. Here's the code I'm using.
<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script src="vjs.youtube.js"></script>
<video id="vid1" src="" class="video-js vjs-default-skin"
controls
preload="auto"
width="640"
height="360"
data-setup='{ "techOrder": ["youtube"],
"src": "http://www.youtube.com/watch?v=7woVTuN8k3c" }'>
</video>
Any ideas about what I'm doing wrong?
EDIT:
Here's a link to a jsfiddle example. Actually, Firefox and Safari are both working for me, but Chrome and IE do not. Are these supported?
You need to use a plugin to run YouTube videos in Video.js
See my example
I've posted an example of getting youtube working on another question:
enabling youtube playback with video.js wrapper
Not sure if that helps your issue - but there are a few working examples linked from there that work on chrome for me (linux/osx).
Related
I tried playing the video using html5 video tag and video.js player, but i am not able to play the video and the video has an mp4 format.
the video can be downloaded from https://drive.google.com/open?id=0BwvTwArK2QWBVVZhbnAtMjZlWlU
<html>
<head>
<link href="http://vjs.zencdn.net/6.2.7/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="test.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<script src="http://vjs.zencdn.net/6.2.7/video.js"></script>
</body>
</html>
I am getting an error message :- enter image description here
Try using single-quotes with data-setup as it is expected to contain JSON.
data-setup='{}'
I'm developing a site in which I want to play video in background. Following is my code, video is playing in Internet explorer but not in Chrome. I'm using 2.2.4 version of jquery and I cannot change it because my all site is developed and If I change jquery than my whole site stops working.
<video id="vid" width="110%" height="100%" autoplay controls loop muted="muted">
<source src="../img/led.mp4" type="video/mp4" />
</video>
Thanx in advance.
I am using video js plugin to play youtube videos. It is giving me following error
VIDEOJS: ERROR: (CODE:150 undefined)
I am using following code
<script src="resources/js/video.js"></script>
<script src="resources/js/youtube.js"></script>
<video id="vid2" src="" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="360" data-setup='{ "techOrder": ["youtube"], "src": "https://www.youtube.com/watch?v=ED0EBHn8_uw" }'>
</video>
Currently I am running this video on new purchased hosting account of reck space Whereas the same code is working on my previous server of godaddy.
One more thing if I change youtube video url to
http://www.youtube.com/watch?v=xjS6SftYQaQ
then it is working on current server as well while any other video is not working. :(
I have tried https and http both.
Please help me.
Thanks
I don't know if you found a solution for this issue but I solved it by setting the "Allow embedding" as checked in the advanced video settings on youtube.
I used the videojs and it is working fine all browsers(including IE) and on Android . But it is not working on IOS devices (iphone and ipad IOS version 6).
Here is the code which I am using to add the video to the page.
<video id="video1" class="video-js vjs-default-skin" width="276" height="153" controls="" preload="auto" data-setup="{}">
<source src=myvideo.mp4 type="video/m4v" >
</video>
I have spent ages and could not find any solution.
I m using video.js Version 3.2.0 and getting the loading spinner forever.
I tried using version 4 and just black screen comes up.
Any Help please.
First put double quotes around the source src attribute and try that. If that doesn't solve it, it sounds like the problem is with the mp4 itself, most likely because of the way it's been encoded or it has a huge filesize. Try using videojs's default movie (http://vjs.zencdn.net/v/oceans.mp4) and see if that works. If it works, you know the problem lies with the movie file itself.
Your web server should support byte-range requests,check whether web server support 206 response. If you are using nginx,add mp4 module.
I solved most of my mp4 encoding issues using handbrake.
Try to change type="video/m4v" to "video/mp4".
<video class="video-js">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
Offical docs.
I'm trying to use VideoJS in a website I'm developing (http://videojs.com/), however I'm trying to load a simple YouTube video on the page for testing purposes but still not working:
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<div style="position: absolute; top: 50px; left: 600px; display:none">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/mp4'></source>
<source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/webm'></source>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
MP4,
WebM,
Ogg<br>
<!-- Support VideoJS by keeping this link. -->
HTML5 Video Player by VideoJS
</p>
</div>
<div style="clear:both;"></div>
</div><!--main-->
And on the of the page I have:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
Any clues what's going wrong here? I was expecting to be able to load and play that video on my page.
Don't use Youtube video to test videojs, since it's hard to find a direct link to the video source. Check this out this question.
The code your provided links to the youtube page not to video source.
<source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/mp4'></source>
The video source might be hidden in here but I'm not sure. Use your own videos hosted on your site to test.
But if you still want to use youtube videos then check out the Video.js forum, where someone provides code for a workaround.
An easier way to embed youtube videos would be to click the "share" then "embed" tab under a video page and copy and paste the code on your site.
Which would give you something like this.
<iframe width="560" height="315"
src="http://www.youtube.com/embed/gZKXrLjCwa8"
frameborder="0" allowfullscreen>
</iframe>
Also I would suggest reading the Video.js documentation again on how to setup.