I am trying to get sources of videos through javascript. The code below is working fine. However it only works for one video only, if I was to add the same code for multiple videos, none of the videos work. I am using video.js as the main player for videos.
html:
<source id="01" src="" type='video/mp4'/>
JavaScript:
document.getElementById("01").src="link";
You absolutely need to reload the video after changing the Source. I give you an exemple with jQuery
var video = document.getElementById("01");
$(video).attr('src', "newlink.mp4");
video.load();
But you can achieve it without jquery
var video = document.getElementById("01");
video.src= "newlink.mp4";
video.load();
You have to use the videojs API to change the source:
videojs('YOUR_PLAYER_ID').src("/path/to/newlink.mp4")
This will work for flash and HTML5
Related
I can run video with link embed youtube.
My code:
<video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
poster='' data-setup='{}'>
<source src='https://www.youtube.com/embed/fZ-yXDJJj5g'>
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
Video is show loading but don't play.
Please help me
As stated on the official repo, video.js doesn't support youtube video out of the box, you need to use a plugin for that:
It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins)
So you'll have to use a plugin for that, like for example this one.
HTML5's video tag only works with video files. It doesn't work with Youtube video links(As those links do not point to source of video, instead they are a pointer to an HTML page). For that either you have to find storage link of video, which is not a good practice. Because Youtube can change that anytime. Better to use iframe for displaying Youtube video on your website.
You could just use tag then pass the src of the video. or even embed just like this.
<iframe id='my-video' class='video-js' width="640" height="264" src="https://www.youtube.com/embed/fZ-yXDJJj5g">
</iframe>
or
<embed id='my-video' class='video-js' width="640" height="264"
src="https://www.youtube.com/v/tgbNymZ7vqY">
then target those id to perform whatever you wanted to do.
I've encountered this problem, video tag does not work on this scenario.
So, I've research you can use iframe tag or embed then play with it into the script.
I'm so sorry, but I can't get a youtube video to play (https://www.youtube.com/watch?v=SyRv0-oPfKE) inside a video tag.
I know about the iframe API but in this case it has to have the default html5 controls, not the youtube controls.
I probably missed something stupid but can't figure it out...
Anyone know how to do this?
EDIT:
so I tried:
<video
controls='controls'
src={`http://www.youtube.com/get_video_info?&video_id=${id}&asv=3&el=detailpage&hl=en_US`}
type='video/mp4'
/>
and tried:
<video
controls='controls'
src={`https://www.youtube.com/watch?v=SyRv0-oPfKE&html5=1`}
type='video/mp4'
/>
but I get blank page.
The HTML video element expects video files as a source. If you want to play a YouTube video using the native HTML video player, you'll have to provide a link to the video itself, not to the YouTube website for this video.
Also keep in mind, that not all browsers can handle any video formats. See MDN: Media formats for HTML audio and video.
I am using the videojs version 5.17.0. I have setup the videojs using the video tag and added two video source. If Webm video source is not working so it should fallback to MP4 video which is working If don't use the javascript to manually initialize videojs player.
<video id = "my-player" class="video-js">
<source id="webm" src="https://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'>
<source id="mp4" src="https://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>
</video>
Also, I need to get the videojs object using java-script and include the ads and keep track of video using the java-script.
Now the problem is if the webm video source is not working then it's crashed on initializing videojs player object in javascript.
var myPlayer = videojs("my-player")); //this is where error happen
myPlayer.play();
Initializing the videoJS in onDocumentReeady() method solved the issue. However, this is the ideal way to handle this but still need to better handle this issue.
To get the player instance of videojs I use this code.
$(document).ready(function()
var videojs1 = videojs('my-player');
var player1 = videojs1.player();
...
player1.play();
}
This code works with jquery.js.
I am trying to use Bootstrap carousel with videos. I have a list of videos of 5 sec. I need to auto-play them using this carousel.
Currently , Bootstrap plays the very first video but I also wish to automatically play all the others when they slide into the screen.
Example:
http://jsfiddle.net/wxMrf/20/
Code :
var $myCarousel = $("#myCarousel");
$myCarousel.carousel({
interval: 2000
});
I checked the fiddle you have created and you seem to embed the video in an iframe. Assuming you have the complete url of the video file resource available with you, you might want to try encapsulating them in a video tag supported by HTML5. It has an autoplay option associated with it and is supported in all major browsers today (upto IE8).
From W3Schools, you could try something like this in context of your code:
<div class="item">
<div class="container">
<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">4
<video controls autoplay>
<source src="foobar.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
Ofcourse, using the video tag limits browser compatibility to some extent which is the whole purpose of using an iframein the first place. That's something you can decide. Also, if you are embedding videos from Youtube or Vimeo in an iframe, they almost certainly have an autoplay option in their videos. You should probably read up the relevant docs to get started on that. Hope this helps you out.
Try this:
$myCarousel.on('slid', function() {
console.log("Slide occur");
//play video
});
Note: I think you are using Iframe to play video, so for playing video using this function, you can simply reload Iframe src.
I have created the working jsFiddle, however while accessing 'video' element within iframe throws cross-origin-request security exception.
To overcome this start Chrome with following command,
chrome.exe --allow-file-access-from-files --disable-web-security
Open http://jsfiddle.net/wxMrf/21/ and see it working
Basically the solution is on the same line what 'Manwal' suggested,
$('#myCarousel').bind('slid', function (e) {
$('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});
Give this a shot:
$('#myCarousel').bind('slid', function (e) {
$('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});
I'd like to click on an embedded youtube video using javascript (so the video plays automatically). I successfully simulated a click on a <div> like this:
function f(){
alert("hello");
}
<div id="someid" onmouseup="f();">
my text
</d>
document.getElementById("someid").onmouseup();
How can the above code be adapted to work with an embedded youtube video?
Just add &autoplay=1 to the link of the video in the <embed> tag.
If he does what you suggest the views on the embedded video won't count. I'm pretty sure he is asking his question because he is trying to find a way to get the video to autoplay and have youtube count the views at the same time.