It has taken me several hours to play rtmp video using videojs. Can anyone give an example that can just run?
I am using chrome. Flash is enabled.
Below is my code. Video url is valid. Can anyone make it run?
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js#7.3.0/dist/video-js.min.css">
<script src="https://cdn.jsdelivr.net/npm/video.js#7.3.0/dist/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flash#2.1.2/dist/videojs-flash.min.js"></script>
</head>
<body>
<video width="600"
height="400"
id="example"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
autoplay
preload="auto"
data-setup='{"techorder" : ["flash","html5"] }'>
<source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd" type="rtmp/mp4">
</video>
</body>
<script>
var player = videojs('example');
player.play();
</script>
</html>
Presumably, you found the previous discussion thread from a year ago:
Playing RTMP stream with VideoJS player
which indicates that others have had difficulty and did NOT succeed.
Now that HTML5 is firmly established, Flash video is rapidly disappearing, as
mentioned four years ago:
https://www.theverge.com/2015/1/27/7926001/youtube-drops-flash-for-html5-video-default
It is very straightforward to convert flash-video into more modern formats...one
such article for using an excellent free open-source tool for conversion is here:
https://addpipe.com/blog/flv-to-mp4/
So, rather than try to solve your technical problem, I would recommend, if at all
possible, to bring your videos up to present-day technology.
Related
I am trying to animate some images'size with the amplitude of several audio files when they are playing. So when audio1 is playing, image1 has to react from the audio1 amplitude.
I have basic knowledge in javascript, jquery and HTML but I don't have strong skills in these fields. I've tried to find a solution with audio API or p5.js but I don't know how to access to the amplitude audio parameters from my files. I always find some complicated tutorial and I can't understand how to access audio in my HTML file with a simple way.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="images">
<img id="image1" src="../images/Image1.svg">
<img id="image2" src="../images/Image2.svg">
<img id="image3" src="../images/Image3.svg">
</div>
<audio id="audio1" controls>
<source src="../music/audio1.mp3" type="audio/mpeg">
</audio>
<audio id="audio2" controls>
<source src="../music/audio2.mp3" type="audio/mpeg">
</audio>
<audio id="audio3" controls>
<source src="../music/audio3.mp3" type="audio/mpeg">
</audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../js/test_AudioVisualizer_02.js"></script>
</body>
</html>
My questions are: What is the best way to access the amplitude parameter in order to change image size? is audio API the best way to acces amplitude or is there other way? I would like to arrive at something like:
document.getElementById("#image1").style.height = 10*audio1.amplitude;
Thank you for your help!
This is what I found on that topic:
https://dzone.com/articles/exploring-html5-web-audio
It's basically a pretty detailed tutorial on playing and analyzing audio using JavaScript. I have not attempted this myself, but a quick glance on the code makes it seem understandable.
Other than that, a few other links that might lead you to some direction:
Animate object by sound amplitude?
^ Somewhat similar question on SO
howlerjs.com
^ A seemingly easy API for sound playback, even though I don't think it's got analysing features.
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've been unable to get the YouTube plugin working with videoJS. I have what I believe is the latest versions of video.js and vjs.youtube.js. Here's the code I'm using.
<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script src="vjs.youtube.js"></script>
<video id="vid1" src="" class="video-js vjs-default-skin"
controls
preload="auto"
width="640"
height="360"
data-setup='{ "techOrder": ["youtube"],
"src": "http://www.youtube.com/watch?v=7woVTuN8k3c" }'>
</video>
Any ideas about what I'm doing wrong?
EDIT:
Here's a link to a jsfiddle example. Actually, Firefox and Safari are both working for me, but Chrome and IE do not. Are these supported?
You need to use a plugin to run YouTube videos in Video.js
See my example
I've posted an example of getting youtube working on another question:
enabling youtube playback with video.js wrapper
Not sure if that helps your issue - but there are a few working examples linked from there that work on chrome for me (linux/osx).
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>