I am struggling how to play the embed youtube url on the html canvas element using JavaScript.
Sample code which I tried
videoAsset = document.createElement("video");
youtube = document.createElement("source");
youtube.src = "https://www.youtube.com/watch?v=nOEw9iiopwI";
youtube.type = "video/youtube";
videoAsset.appendChild(youtube);
or
<canvas id=c></canvas>
<video id=v controls loop>
<source src=https://www.youtube.com/watch?v=nOEw9iiopwI type=video/youtube>
<source src=https://www.youtube.com/watch?v=nOEw9iiopwI type=video/youtube>
</video>
The above code doesn't works for me .
Since You are using youtube videos. why don't you use Youtube Api.You tube api .The api is clear and works well.The urls specified in the question will lead to iframe not videos mostly.Ad the Api alos provides lot of customization options.
Related
I need to show multiple instances of a video tag on one page. I'm trying to find a way to read video buffers and use MediaStream to append the buffers to another video tag. But it seems there is no such an api in video tag.
Is there any way to do this? please let me know if you know any solutions.
NOTE: I don't want to use canvas to put image data on it because of performance issues in safari.
"I need to show multiple instances of a video tag on one page...
But it seems there is no such an api in video tag."
You can try using the CaptureStream API (intro). You can also check options in the documentation.
CaptureStream should not care if your video input is a media file or some appended buffers.
Note: In these stream copies...
autoplay is needed for auto-displaying pixels,
muted avoids hearing multiple audios.
This code is tested as working in Chrome (Windows), so let's hope it works in Safari (Apple) too:
<!DOCTYPE html>
<html>
<body>
<video id="vid_01" width="320" height="240" controls>
<source src="myfile.mp4" type="video/mp4">
</video>
<video id="vid_02" width="320" height="240" muted autoplay>
</video>
<video id="vid_03" width="320" height="240" muted autoplay>
</video>
<script>
var streamCopy;
var vid1 = document.getElementById('vid_01');
var vid2 = document.getElementById('vid_02');
var vid3 = document.getElementById('vid_03');
//# check if video is ready to be copied...
vid1.addEventListener("loadeddata", copyVidStream );
function copyVidStream ()
{
if (vid1.readyState >= 3 ) //if ready then copy stream
{
streamCopy = vid1.captureStream();
vid2.srcObject = streamCopy;
vid3.srcObject = streamCopy;
}
}
</script>
</body>
</html>
I am using one of the webrtc libraries to show video and attaching the stream received to video element. But when I inspect the video element, src attribute is missing.
<video autoplay="" id="EKA-e2RERLzhCFy8AAEd" class="videoRoom"></video>
I have couple of questions here :
Is it possible for video element to have no src attribute.
If possible, how to get src for that video
Is it possible for video element to have no src attribute.
Yes it's possible.
The library you do use probably sets the srcObject property of your videoElement.
This property allows to set the source of your video directly to a MediaStream, a MediaSource, a Blob or a File Object.
Note that FF only supports MediaStreams currently.
Example for FF (inspect the element afterward)
navigator.mediaDevices.getUserMedia({video:true}).then(s=>(vid.srcObject = s));
<video id="vid" controls></video>
And a fiddle for chrome since it requires https protocol for GUM to work.
If possible, how to get src for that video
Well, there is not really an src so I'd say not possible.
You can still call yourVideoElement.srcObject, but this will return the object to what it was set (usually a MediaStream).
If you need to record it, you can then use a MediaRecorder.
<div class="col-sm-12">
<video width="400" controls>
<source src="http://ia800803.us.archive.org/17/items/MickeyMouse-RunawayTrain/Film-42.mp4" type="video/mp4">
</video>
</div>
In src place the video url you want
<video width="400" controls>
<source src="" type="video/mp4">
</video>
How can I embed a video from vk.com and specify the time on which the video should start (eg: the video should start from the middle, or from second 5), and to hide the controls, like on YouTube?
A simple embed looks like:
<iframe src="//vk.com/video_ext.php?oid=162756656&id=171388096&hash=b82cc24232fe7f9f&hd=2" width="853" height="480" frameborder="0" allowfullscreen></iframe>
To make it autoplay I solved by adding &autoplay=1 at the end of the src url.
I tried to find an API or something else for the embed but I am unable to find it. Thank you!
It seems like vk.com used to support &t=1m14s parameter when it was using Flash video player, but they don't have such functionality since they moved to HTML player.
So the answer is - there is no way to do it.
To set a video's current time we use .currentTime . In order to do this first you need the url of the actual video. To do so click into your iframe src then get the video src up to .mp4 which is https://cs634504.vk.me/u162756656/videos/6c35b838ac.480.mp4 .
var mediaElement = document.getElementById("video");
mediaElement.currentTime = 122;
<video id="video" controls>
<source src="https://cs634504.vk.me/u162756656/videos/6c35b838ac.480.mp4" type="video/mp4">
</video>
So I have created a simple video playlist which works great with videos that I am hosting but I get the above error when loading a youtube video src. Onclick I am grabbing the url from a data attr and using the video.js src function to load the new video.
video settings:
<video id="fatigue-1"
class="video-js vjs-default-skin"
controls
preload="auto"
width="100%"
height="100%"
data-setup='{"techOrder":["youtube", "html5"], "src": "https://www.youtube.com/watch?v=SS4F1U5FuNM"}' >
</video>
update src function:
updateSrc: function(e) {
var videoURL = $(e.currentTarget).attr("data-url"),
videoType = $(e.currentTarget).attr("data-type"),
videoID = this.$el.find(".video-js").attr("id"),
videoPlayer = videojs(videoID);
videoPlayer.src({type: videoType, src: videoURL});
}
I'm not sure that the youtube plugin works with the src function as when my method runs it updates the src outside the data-setup attr and in the docs it states that the url should be defined inside. Also the video id changes to show the html5 api is being used rather than the youtube one. See below:
<video id="fatigue-1_html5_api"
class="vjs-tech"
preload="auto"
data-setup="{"techOrder":["youtube", "html5";], "src": "https://www.youtube.com/watch?v=SS4F1U5FuNM";}"
src="//www.youtube-nocookie.com/embed/yP41vpFOKVA">
</video>
Wondering if anyone has a working example of dynamically loading youtube videos with videojs or can see any glaring mistake I am making?
In html:-
<video
id="my-player"
class="video-js vjs-default-skin"
controls
preload="auto"
width="1260"
>
</video>
do not provide any in-line data setup or src
In js;-
const player= videojs('my-player',{
preload:'auto',
controls:true,
autoplay:true,
techOrder:['html5','youtube']
})
player.src({type:'video/youtube',src:videoUrl})
player.load();
player.play();
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me