I'm a designer and I do projects where I try to code, let's say I DIY in front end! But right now I want to do something where I'm completely stuck.
I would like to have several screens (multiple devices) containing videos, they would all launch at the same time when clicking on a button on a specific page.
I heard about nodejs to maybe create several pages each containing a video, and on clicking a button on the index page all the other pages launch the video at the same time. I tried to dive into nodejs but I'm extremely clueless, I'd like to know if you think it's possible to do it like that? And if so, if you maybe have any resources?
I hope I'm clear, thanks a lot in advance!
You can achieve this with pure html and javascript, I'm not sure that's what you asking but...here is an example:
document.getElementById("clickme").addEventListener("click",function(){
document.getElementById("vid1").play();
document.getElementById("vid2").play();
document.getElementById("vid3").play();
})
<video width="400" controls id="vid1">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video width="400" controls id="vid2">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video width="400" controls id="vid3">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<button id="clickme">click me</button>
Related
I am looking for the best video player to use on my offline website I tried with some video players but it does not work well. sometimes it is stuck when user try to stream it. If have some video players as youtube player and we can use it offline is the best practice for my requirement. if someone know this please help me. thanks in advance.
Unfortunately no. Videos which are hosted by YouTube are only available to be on the YouTube player.
Like other users have said, you may be interested in HTML5 video. All major browsers will support it.
There are also 3rd party libraries which offer HTML5 video. http://videojs.com/ is a popular one.
you can use HTML5 video tag.
https://developer.mozilla.org/en/docs/Web/HTML/Element/video
e.g:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
You maybe can use HTML5 to Solve that, i hope help with this Link on HTML5 Video Player, if not solve your problem or if you have some questions ask! :)
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Hiii Everyone,
In my project.I tried with html5 video tag.Below is the code
HTML code
<video autoplay loop muted poster="screenshot.jpg" id="v" width="100%" height="">
<source src="img/main.mp4" type="video/mp4">
</video>
it will be play continously in my website.This video is not playing in safari browser.For that i tried in some other way with embed.It is playing in safari
<embed src="img/main.mp4" width="100%" height="" autoplay loop muted id="v" >
</embed>
But what the issue is while i tried with video tag it is like below picture.
After tried with embed tag it is like
What is the issue is when trying with video its is compatible with full width and height of desktop and in embed it showing in very small size and it is not playing continously.If anyone knows the solution of my problem.Please help me to get out of this issue.Thanks in advance.
You should add controls="true" for the tag.
tag can not autoplay in iOS safari browser, and the default appearance is without controls has no play button.
If you don't want to use the default controls, you can create your control bar instead. Using methods of , such as .play() .pause(), to control the video.
it needs height add style="min-height:300px"
<video autoplay loop muted poster="screenshot.jpg" id="v" width="100%" height="" style="min-height:300px">
<source src="img/main.mp4" type="video/mp4">
</video>
you should also try height attribute in embedding. I hope it will solve your problem
<embed src="img/main.mp4" width="100%" height="auto" autoplay loop muted id="v" >
I'm trying to do a simple video with autoplay on our homepage (http://froy.com). Nothing fancy. Everything works smoothly in Firefox and even IE.
However, the autoplay does not activate on Chrome. I have tried in incognito with no extensions and issue persists. Weird part is, trying the code out on jsfiddle works! Additionally, I see similar video tag used at other websites working as well.
In fact, I went through bit by bit adding different parts of the entire homepage's code to jsfiddle (html, css, javascript) to try to isolate the issue - no luck. I'm at a loss and any help would be appreciated.
Below is the code:
<video preload="auto" autoplay loop muted width="100%" height="auto" style="margin-top:-25px" >
<source src="https://cdn.shopify.com/s/files/1/0220/3498/files/Video_Slider_1.mp4" type="video/mp4">
<source src="https://cdn.shopify.com/s/files/1/0220/3498/files/Video_Slider_1.webm" type="video/webm">
</video>
Does this have something to do with my javascript? If so, why is jsfiddle not picking this up when I include scripts in it?
I am using the same code which you are using, just the video is served from my server, and everything is working fine.
<video preload="auto" autoplay loop muted width="100%" height="auto" style="margin-top:-25px" >
<source src="http://www.example.com/clip.mp4" type="video/mp4">
<source src="http://www.example.com/clip.webm" type="video/webm">
</video>
Google Chrome Version: Version 38.0.2125.111 m
I have 2 video elements on my test page, like so:
<div id="parent">
<video id="foo" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
<video id="bar" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
</div>
In the latest FF, everything works fine. In Chrome however, neither of these videos will play; looking at the net tab reveals that they get stuck in 'pending' status for anywhere from a few seconds to infinity. If I comment out/remove a video element, the other will play.
I've seen multiple Chromium bug reports talking about similar issues, but none that seem to be directly related to a parent container. I've tried building the markup dynamically through JS with the same result. I've also tried adding codec attributes with no luck.
For the sake of argument, lets say restructuring the page so no videos live in the same parent isn't an option. Is this just an unfixable bug? Any possible workarounds, however hacky?
Solved - apparently making a request for the same filename from the same server at the same time freaks Google out. Changing filenames, or domains, works fine. FWIW, I duplicated the test vids and added 1, 2, 3, etc. to the end of the filenames and ran them from the same server. Works as expected. Using test videos from different domains got me on to the solution.
I am doing a college project whereby I have to create a website in Dreamweaver and I have to include timeline-based events on the different pages. For this I want it so when the page loads a video, for example, will play 5 seconds after followed by a sound clip.
Is there anything in Dreamweaver that will enable this? Or code in Javascript? Any help will be appreciated!
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
try this as example