I've got an IP camera that produce a flv stream on a URL like:
http://192.168.0.6/flv?port=1234&app=bcs&stream=channel0_main.bcs
The URL works fine in VLC. I tried to stream the video in Chrome with video.js according to this previous question.
<head>
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="480"
data-setup='{"example_option":true}'>
<source src="http://192.168.0.6/flv?port=1234&app=bcs&stream=channel0_main.bcs" type="video/x-flv">
</video>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
</body>
I created the HTML file locally on my desktop and I've got the following error in my browser:
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.
I'm stuck here, I can't figure out why it not displaying the video.
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 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 a list of video's in a page. The videos are fetched from Server via Rest API and are used in html as below. The first video plays well but later video's wont play. The resolution are same for all video. This works well in other browsers and platform.
<video width="645" height="425" id="myvideo" class ='video' controls controlsList="nodownload">
<source id="source" src="" type="video/mp4">
</video>
In my source tag, I've mentioned type="video/mp4"
In JS Side I do the below
$("#source")[0].src = <path-to-the-video>;
This works great on all browers and platform except for windows 7 and ie 11.
The error I get is
MEDIA12899: AUDIO/VIDEO: Unknown MIME type.
I've checked over the net
to add the type="video/mp4" which is already there and does not solve the problem.
The video resolutions are correct because the same video works in the same IE and Window when played in a separate HTML file.
What am I missing?
Error Screen Shot
Same Video working in same browser when added to a html file
<video width="645" height="425" class="video" id="myvideo" style="display: inline-block;" controls="" controlslist="nodownload">
<source id="source" src="http://hostname.com1/video2" type="video/mp4">
</video>
Screenshot
I tried playing the video using html5 video tag and video.js player, but i am not able to play the video and the video has an mp4 format.
the video can be downloaded from https://drive.google.com/open?id=0BwvTwArK2QWBVVZhbnAtMjZlWlU
<html>
<head>
<link href="http://vjs.zencdn.net/6.2.7/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://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" data-setup="{}">
<source src="test.mp4" type='video/mp4'>
<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 src="http://vjs.zencdn.net/6.2.7/video.js"></script>
</body>
</html>
I am getting an error message :- enter image description here
Try using single-quotes with data-setup as it is expected to contain JSON.
data-setup='{}'
I am using video js plugin to play youtube videos. It is giving me following error
VIDEOJS: ERROR: (CODE:150 undefined)
I am using following code
<script src="resources/js/video.js"></script>
<script src="resources/js/youtube.js"></script>
<video id="vid2" src="" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="360" data-setup='{ "techOrder": ["youtube"], "src": "https://www.youtube.com/watch?v=ED0EBHn8_uw" }'>
</video>
Currently I am running this video on new purchased hosting account of reck space Whereas the same code is working on my previous server of godaddy.
One more thing if I change youtube video url to
http://www.youtube.com/watch?v=xjS6SftYQaQ
then it is working on current server as well while any other video is not working. :(
I have tried https and http both.
Please help me.
Thanks
I don't know if you found a solution for this issue but I solved it by setting the "Allow embedding" as checked in the advanced video settings on youtube.