I am a little bit stuck right now with a code.
In fact, I would like to create Vimeo's videos autoplay list on my website using javascript as we can see on youtube.
As you will see on the script below, the click event allows changing the iframe videos. I'd like when my first video in my list of Vimeo's iframe videos end, the second video can start automatically to play as on youtube autoplay.
Please advise.
Here is the link to my script on codepen.io
https://codepen.io/fanhatcha/pen/XQoWdR
<iframe
id="playerarea"
src=""
width="850"
height="450"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen>
</iframe>
<ul id="playlist">
<li vimeourl="https://player.vimeo.com/video/328821953?autoplay=0&loop=1&autopause=0&background=1&responsive=true">
<li vimeourl="https://player.vimeo.com/video/328821360?autoplay=0&loop=1&autopause=0&background=1&responsive=true">
</ul>
$(function() {
$("#playlist li").on("click", function() {
$("#playerarea").attr({
"src": $(this).attr("vimeourl"),
})
})
})
'create Vimeo's videos autoplay using javascript?' that just can be!
Vimeo(so is Youtube) are standalone programs. So they'll work only in embed context and won't use JavaScript who can manage and use DOM.
To set a video to autoplay you've to log into the Vimeo application and set it using theirs parameters before sharing it to your own page.
If you could use JavaScript on a program who's not yours it's a flaw and threat for the program...certainly you did agree use and terms of the licence of using Vimeo, so you're bind to their rules.
If you want videos and use them with JavaScript there's the HTML5 API video. By the way it'll require not using a corporate program who will reccord and display the video and use your own server to do that(or any source providing a video files and not a link to the vimeo/youtube application).
Related
I am using the below code for youtube embed url and it working perfectly fine. But now I have an url which is from my sharepoint account. I want to play that but its not working. Please help me out.
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" type="text/html" webkitallowfullscreen
mozallowfullscreen allowfullscreen width="600" height="400" [src]="url">
</iframe>
previously the code for url was like stated below which was running fine and i was able to play my video
const safeURL = https://www.youtube.com/embed/${this.data?.videoID}?autoplay=0&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0;
this.url = this.safePipe.transform(safeURL, 'resourceUrl');
but now i want to change the url's value like this
this.url = 'https://abc-my.sharepoint.com/:v:/p/abc/EZD14y8daXNMpxefWdmVOj8BxpWcHM7RHRq6GyCb8Dv0Gw';
but now I am not able to play my video. Can you please help me out in playing non-youtube videos in my angular 8 application.
The <iframe> tag will not intelligently digest the content and output markup like your browser does when you navigate to the SharePoint's hosted video.
The Youtube embed URLs are not URLs to a video file - they have markup in them, which is why the player is different to your default browser's video player.
If you were to go to that SharePoint video in your browser and view the page's source, you'd see that some stuff gets added, but if you were to run wget https://thevideourl.com/myvideo.mp4 you would download only the video, not a html document containing a video tag which references the video.
Consider using a <video> tag with a src attribute. For example:
<!-- Instead of... -->
<iframe src="https://sharepoint.com/thevideourl"></iframe>
<!-- Do... ->
<video src="https://sharepoint.com/thevideourl"></video>
Now, the fact that it's in SharePoint raises questions as to whether or not your browser will be able to access the video at all given the above code. I am not sure if it would authenticate you properly.
I have the following Iframe attached to my HTML code:
<iframe width="640" height="360" src="" frameborder="0" scrolling="no" allowfullscreen></iframe>
where the src can be any embedded video (like https://www.youtube.com/embed/fWa5kDtyV0w, for example). What I'm trying to do is the following: when the user pause the video, a function must be called to save the time of the video in a variable. However, I cannot find a way to this if, unless of using specifics APIs, like the one from Vimeo or Youtube (what I don't want to do, because some platforms don't have it). So, is there a way to interact with the video in the Iframe using JS or other stuff?
Extra information: In some of my tests, I got blocked by the browser by XSS.
I have the following iframe:
<iframe src="http://www.youtube.com/embed/{{ item.getFieldCollectionItem().field_youtube.value }}?playsinline=0&rel=0&showinfo=0&controls=2&modestbranding=1&autohide=1" frameborder="0" width="300" height="169"></iframe>
however the the buttons generated from the API don't have text inside making them inaccessible. The accessibility report I have it mentiones the following:
"Unlabelled 2 Button"
I assume referring to the "play" and "pause" buttons.
Is there a way to make these more accessible by having a descriptive text inside?
Instead of fiddling with what YouTube gives us, I would recommend using a third-party video player that supports YouTube videos:
Able Player is available under the MIT licence. (Source code on GitHub.)
Plyr supports YouTube and Vimeo videos. The source code on GitHub is available under the MIT licence.
Video.js also supports YouTube videos if you add its YouTube plug-in.
There are other video players that devote attention to accessibility, but not all of them support YouTube videos.
I am using Youtube API and playing a video from youtube by sending video ID.
and video is been played well.
Code:
<iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
Now i have a button and i want the javascript to capture the frame which is been played at that particular time.
<input type="button" id="capture" value="Capture" onclick="Captureimage();"/>
like we have this screen capture in VLC media player
I want to have the same functionality here.
Since its an embedded media(Video inside iFrame), struggling bit.
tried with html2canvas. No lucks.
Can anyone plz help.
Regards,
Arun
I'm trying to find a way to listen for the end/complete event of a video embedded from youtube/metacafe/vimeo etc. I know this can be accomplished by things like the youtube API using onStateChange with a value of 0, but I'm curious if it can be done without having to go through the API.
For example if I have something like:
<div id="video-container">
<iframe width="420" height="315" src="http://www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" allowfullscreen></iframe>
</div>
is there anyway I can listen for the end event on the div or iframe?
kind of like this:
Javascript player for managing playlist of vimeo *and* youtube videos?
But I'm interested in adding several sources so it would be much easier if I didn't have to go through the APIs.
Thanks-
I think, it's not possible for youtube. It would be possible if you used your own flash player. You would be able to call custom javaScript function from yuor flash player.