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();
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 have an embedded video on my site and am currently using the following code. I don't want the video to loop but it gives a black screen once the video is done playing. I know there is the poster option under the video tag but it only displays the thumbnail at the start of the video and not after it has finished playing.
Could you all help me out as to how should I add the thumbnail after the video is done playing?
<video controls autoplay poster="some_path">
<source src="some_video.mp4" type="video/mp4">
</video>
I see two ways to solve your issue.
This one will set your current frame to position 0 (the very first frame) after the video will end. You can set any frame you like. This solution is recommended.
<video controls id="myVideo" poster="test.jpg">
<source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
myVideo.currentTime = 0;
};
</script>
The next one will reload the video source, so the poster will appear again. According to specification of poster in video it will be displayed only until the video starts once. After that, the only way to get the poster again - reload the video src, and a poster, just to make sure. Will work a little bit more stable.
<video controls id="myVideo" poster="test.jpg">
<source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
myVideo.poster = "test.jpg"
myVideo.src = "test.mp4"
};
</script>
is it possible to not hardcode the source of an hls file inside javascript but instead put the source in a <source> tag like regular mp4 files?
Use Case
I am running a website with the html5 based Plyr. So far, I have managed to get it running along with having the option of 4 resolutions to choose from, encoded with mp4 files. The video tag looks like this:
<video id="video" controls poster="{URL}/poster.jpg playsinline>
<source src="{URL}/1080.mp4 type="video/mp4" size="1080">
<source src="{URL}/720.mp4" type="video/mp4" size="720">
and so on....
However the issue is if I put a source with an .m3u8 file extension, Firefox complains it cannot play it since it's unsupported. Fair enough, except the hls demo on the github readme shows a codepen where the source is hardcoded in, like so:
<video id="video" controls></video>
<script>
var source = 'https://<url-to-m3u8-here
...
This cannot work in my use-case since as you saw above, I need the multiple sources for resolution switching until Plyr can do this with the manifest natively.
Is there any way to incorporate hls.js into Plyr so I can just specify a video tag like so?
<video id="video" controls poster="{URL}/poster.jpg playsinline>
<source src="{URL}/index.m3u8" type="application/x-mpegURL" size="Auto">
<source src="{URL}/1080.mp4 type="video/mp4" size="1080">
<source src="{URL}/720.mp4" type="video/mp4" size="720">
(I'm working to include the Auto tag)
Hey i guess you need to do something like this:
HTML
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css">
<video id="player" controls preload="metadata">
<source src="https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8" type="application/x-mpegURL">
<source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4">
</video>
<script src="//cdn.jsdelivr.net/npm/hls.js#latest"></script>
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
JS
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var player = new Plyr(document.getElementById('player'), {
//debug: true
});
player.on('ready', function(event){
var instance = event.detail.plyr;
var hslSource = null;
var sources = instance.media.querySelectorAll('source'), i;
for (i = 0; i < sources.length; ++i) {
if(sources[i].src.indexOf('.m3u8') > -1){
hslSource = sources[i].src;
}
}
if (hslSource !== null && Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(hslSource);
hls.attachMedia(instance.media);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
console.log('MANIFEST_PARSED');
});
}
});
});
</script>
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.
Basically what I'm trying to do is make the video redirect to a different web page after it's finished playing (very similar to what YouTube uses for Playlists). I've tried doing a bit of research before asking this type of question but nothing seems to be working out for me.
Here's the code:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>
Since it looks like you're using Video.JS for this, you should have a look at their docs:
https://github.com/videojs/video.js/blob/master/docs/index.md
Specifically, the API section:
https://github.com/videojs/video.js/blob/master/docs/api.md
In the "Events" section, it says:
ended
Fired when the end of the media resource is reached. currentTime == duration
So you'd need to get a reference to your player (also on that page):
var myPlayer = videojs("example_video_1");
and then listen for the ended event, and redirect from there:
function endedFunction(){
window.location = 'http://www.example.com/';
}
myPlayer.on("eventName", endedFunction);
As borrowed from this answer, try the following. And you don't need video.js for this.
HTML
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>
JavaScript
<script>
var video = document.getElementsByClassName("video-js");
// Or select element by HTML tag
// var video = document.getElementsByTagName('video')[0];
video.onended = function() {
window.location.href = "www.yoururl.com";
}
</script>
Ought to work.