I am working on a JS/HTML5 application that has to show the same video in two different places of the screen.
I can use any web browser I want - currently I am with Chrome.
Is it possible to display same video in two different places of the screen, or do I need to setup two different streaming sessions and take care of keeping them in sync?
Yes you can use same video src for two video players in the same page
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
For video player options below is the url
http://www.w3schools.com/tags/tag_video.asp
and you can test the example
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_autoplay
HTML
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls="controls" autoplay>
<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>
replace the html in w3schools Tryit Editor
Related
Video Autoplay not working on the latest safari- 15.3
On the older version of the safari, video working fine.
I used this HTML code:
<video loop="loop" autoplay="" playsinline="" muted="" width="100" height="100" id="mejs_013860265590046605_html5" preload="none" src="/wp-content/uploads/2022/02/Home-Video-1_2.mp4" style="margin: 0px; width: 1020.44px; height: 574px;">
<source type="video/mp4" src="/wp-content/uploads/2022/02/Home-Video-1_2.mp4">
<source type="video/webm" src="/wp-content/uploads/2022/04/Home-Video-1_2.webm">
</video>
I am using videojs : http://videojs.com/
Can you guys please help me if I can play audio files using videojs library.
Example
<audio id="audio_example" class="video-js vjs-default-skin" controls preload="auto"
width="600" height="600" poster="/img/awesome-album-art.png" data-setup='{}'>
<source src="/audio/awesome-music.mp3" type='audio/mp3'/>
</audio>
My browser is Chrome. I know that to get it to autoplay, the attribute should just simply read "autoplay," but it isn't working.
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" width="620" height="350" data-setup="{}">
<source src="http://x.com/something.mp4" type='video/mp4' />
</video>
Most browsers require the video to be initiated by the user or muted.
Try:
<video id="example_video_1" muted="muted" class="video-js vjs-default-skin" controls autoplay preload="auto" width="620" height="350" data-setup="{}">
<source src="http://x.com/something.mp4" type='video/mp4' />
</video>
When I place video into a slide on bxSlider, it plays as it should on desktop browsers, but when tested on iOS devices - iPhone and iPad, video will not play.
I've included the current html code. I have duplicated the <video> element underneath the slideshow which plays as it should on all devices.
As per the bxSlider guide on video, I have included the jquery.fitvids.js file. The issue may be to do with that plugin, as when I remove that, the video in the slide plays, however, the slideshow then does not function correctly (duplicated slide is visible and controls are missing).
Another unexpected thing to note is that when the script initialising bxSlider is placed in the head beneath the libraries, bxSlider doesn't initiate at all.
jsFiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vid test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.fitvids.js"></script>
<script src="jquery.bxslider.js"></script>
</head>
<body>
<ul class="bxslider">
<li>
<video width="100%" height="300" id="video1" controls preload="auto">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg">
</video>
</li>
</ul>
<video width="100%" height="300" id="video1" controls preload="auto">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg">
</video>
<script>
$(".bxslider").bxSlider({
video: true,
useCSS: false
});
</script>
</body>
</html>
Wrap your second video tag in 'li' tag and take it inside of that 'ul' tag.
<ul class="bxslider">
<li>
<video width="100%" height="300" id="video1" controls preload="auto">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg">
</video>
</li>
<li>
<video width="100%" height="300" id="video1" controls preload="auto">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm">
<source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg">
</video>
</li>
</ul>
I'm trying to embed a video on my website:
<video width="320" height="240" controls="controls">
<source src="new-slideshow.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
For some reason, the video is not loading, and I can see this information when I inspect the network request:
https://dl.dropbox.com/u/2241201/locker/Screen%20Shot%202012-11-14%20at%201.49.39%20PM.png
Why is the video being canceled?