I'm building a lightbox and have reached adding support for flash and videos. I've never had any demands or need for video, so honestly don't know where to begin. I do know I have to be able to serve different video formats for different browsers, but don't know how to approach this. I'm also hoping to have this work in "non-modern" browsers. The tutorials and questions I've found are very vague any typically result in "try using this plugin". Perhaps someone could help by explaining how i would go about loading a video that would be browser compatible, and possibly the video formats i should be supporting? Or a link :) thanks!
I just did the same thing. I used a combination of Fancybox and Video for Everybody.
Basically, the idea behind Video for Everybody is that you use the HTML5 video tag with an embedded flash video player for browsers that do not support HTML5 video. For the embedded flash player, I used JWPlayer.
And then you just make something like Play Video and point Fancybox at the link. Voila, you've got a video in an Fancybox (which is about the same thing as Lightbox).
For cross-browser compatibility, you should offer the file in MP4 (using H.264 codec) and WebM or Ogg. Older browsers that do not support HTML5 videos will use the flash player fallback with the MP4 file anyways.
One thing to keep in mind with your MP4 file is that often the moov atom is placed at the end of the file, so the file cannot start playing until it has fully downloaded. Use a tool like qt-faststart to move it to the beginning of the file, allowing it to start playing before fully downloaded.
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.video_link").fancybox();
});
</script>
</head>
<body>
Play video
<video width="640" height="360" controls id="videoPlayer">
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
</object>
</video>
</body>
</html>
Related
I am currently building a Website for School and implemented an Upload-System. Now I want People to be able to watch uploaded Videos. Currently if you try to watch a Video, lets say test.mp4 it takes over a minute to load.
I know that using:
ffmpeg -i inputvideo.mp4 -movflags faststart -acodec copy -vcodec copy outputvideo.mp4
moves the atom moov to the beginning of the file. And when I manually convert the mp4 using the previous command the file starts playing instantly.
Problem:
I don't want to convert each file manually. Is there another way of playing user-uploaded Videos instantly? Thanks for your help in advance.
I am using this Code, but it has nothing to do with the streaming itself I guess:
<source src="Clap.mp4" type="video/mp4">
Your browser does not support the video tag. <!-- Text to be shown incase browser doesnt support html5 -->
</video>
I also tried to use a js library:
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="Clap.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
</body>
In both cases I want to play Clap.mp4
I scraped some videos, and displayed them with iframes. That works well, however, I am now looking for a way to control these videos on my react app.
What i mean by control is for instance: pause, play, currentTime in video...etc.
I have tried several things so far.
html5 tags, but it does not work mp4 video link that I have.
A few packages, like jplayer or player.js.
I am pretty sure I can achieve my goal, I guess I just need to find the right tool.
EDIT: Here is a example of my code with video.js
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="https://openload.co/embed/myvideo" type="video/mp4"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
Take a look at video.js. It will give you a complete control over your video playback. Take a look at their advanced examples.
Also, you don't need iframes to work with videos. If that is a design decision then it's fine but you can do video embeds without iframes.
To control video player instance via js refer to following
JS
var myPlayer = videojs('example_video_1');
HTML
<video id="example_video_1" data-setup="{}" controls="">
<source src="my-source.mp4" type="video/mp4">
</video>
Then you can control the player instance like following
myPlayer.play();
myPlayer.pause();
myPlayer.currentTime(120);
Please look at the player API in the following link
https://docs.videojs.com/docs/api/player.html
Please look at react component implementation in the following link
https://docs.videojs.com/tutorial-react.html
I saw a question like mine on this page: How to play video from google drive using javascript?
However, I have a question. For some reason, this answer from that question:
Google provides some GET-params like export and id with google-drive:
?export=download&id=YOUR_LONG_VIDEO_ID
to give you the ability to insert an uploaded video into a HTML5-video-tag.
This should work:
$("#play").click(function() {
$("#video")[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="play" style="margin-top: 300px;">Play</button>
<video id="video" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=0B8-qLYDzDfCyRF9vOE9sWmx5YjA" type='video/mp4'>
Your browser does not support the video tag.
</video>
Works well when I test it out on the w3schools tryit:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide
I switched that code for my code, I just use it as my practice area.
But when I place my own video in with the same formula, just switching the original google drive video with my own, my video controls are greyed out and clearly can not play the video. My original video is uploaded on my google photos, put in a named folder on my google drive, where both folder and video are open to anyone with the link access.
I don't understand why the original video works fine, and mine doesn't. It's frustrating because I know using this way of putting a google drive video into the video tag allows me to use my custom controls to control the video. But something is going on with my video for some reason.
Here is my code with the original one, you'll see it's the same.
$("#play").click(function() {
$("#video")[0].play();
});
$("#play2").click(function() {
$("#video2")[0].play();
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="play" style="margin-top: 300px;">Play</button>
<video id="video" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=0B8-qLYDzDfCyRF9vOE9sWmx5YjA" type='video/mp4'>
Your browser does not support the video tag.
</video>
<br>
<br>
<button id="play2" style="margin-top: 300px;">Play</button>
<video id="video2" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=1hLjl0TDEOnPrgXhFxAVNL5fM_qLtCgB9lA" type='video/mp4'>
Your browser does not support the video tag.
</video>
Lots of help will be GREAT!!!!!!!!
According to me, there is permission problem with your drive video.Because I have tried to hit on your link I am getting error of permission. But previous drive's video((working fine)) easily accessible.
Go to your video in Google Drive.
Right-click and select get shareable links, then change your sharing setting to 'On - Public on the Web'.
Refer Image for sharing setting
I want to play a video after another video so I use this code
<video id="example_video_1" autoplay controls="none" width="640" height="300" poster="vlcsnap-2015-01-10-20h41m11s114.png" onended="run()">
<source src="intro.mp4" type='video/mp4' />
<source src="intro.webm" type='video/webm' />
<source src="intro.ogv" type='video/ogg' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
<script>
videoPlayer = document.getElementById("example_video_1");
function run(){
var nextVideo = "video2.mp4";
videoPlayer.src = nextVideo;
videoPlayer.play=autoplay;
videoPlayer.controls=controls;
};
</script>
This works fine in chrome but when i play this in firefox the 2nd video (video2.mp4) dose not play, as firefox dose not support mp4 format. So is there any process to set the second video in mp4, webm and ogg file format so that most of browsers can play the video.
Your last source <source src="intro.ogv" type='video/ogg' /> Is wrong. You wrote two different formats .ogg is for audio. And you need to establish a folder name that the file is in. With this you need to have the HTML5/CSS3 file right next to the folder in a separate folder. This is the correct code:
<source src="foldername/intro.ogv" type='video/ogv' />
Other than that your code is in great shape.
***I do not know anything about your script because I know nothing about JavaScript, or JQuery. Hopefully this was useful! Sorry :(
Our application has a lot of videos to play on HTML page, at the beginning. I tried both object and video tags to play these videos, but I found the problem of cross-browser compatibility, these 2 tags can't work well on IE 6/7/8. Absolutely, we are not able to develop a new video player to do it, and I guess video playing is a very common case for Java EE development, so I want to ask if there is any good way for us to play videos with good cross-browser compatibility.
Thanks.
Try jplayer which is compatible with Windows : IE6, IE7, IE8, IE9, IE10, IE11 and also works well on Opera mini and android browser.
http://www.jplayer.org/
Doing something like the following will allow you to play videos on most browsers:
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="player.swf?videoUrl=myVideo.mp4">
<param name="movie" value="player.swf?videoUrl=mVideo.mp4">
</object>
</video>
In this case player.swf is a Flash player such as those available with popular video players like MediaElementJs (which of course you could simply use instead) which plays MP4 files. Or if you have a Flash flv file you can play it here without the player.swf.
You should also include the html5shiv file so that the video element is not ignored by these older browsers.
But you may have tried all this, so an example of the code you tried that didn't work would be useful to see.