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='{}'
Related
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.
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
Trying to create a custom skinned video player on this page.
http://turbosaurusrex.github.io/keets/
I'd like to hide every element except the play button. I've linked video.js and the css file but it doesn't seem like it's working?
I threw the cdn right after the body tag:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
The video player returns the browser's native player. No change I make to the css does anything. Is this a jekyll thing I've overlooked, am I stupid or what? I don't know. P
You need an id attribute and data-setup for each video.
https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md#step-2-add-an-html5-video-tag-to-your-page
<video autoplay="" controls="" loop="" poster="/video/keets/keet1.jpg" id="firstvid" class="video-js vjs-default-skin col-xs-12" data-setup="{}">
<source src="/video/keets/keet1.webm" type="video/webm">
<source src="/video/keets/keet1.mp4" type="video/mp4">
</video>
i downloaded video js and changed the source to my local video it works on ie and waterfox but not in chrome it continuously loading.. i used mp4 and ogv as video type i notice this problem when i go to video js website. the home page video continuously loading without playing it. but it was fine with other browsers how do i fix this
here's my code
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
data-setup="{}">
<source src="videos/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' </source>
<source src="videos/video.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
To watch videos in an HTML5 web player requires us to add the source of the video in the HTML code like this:
<video id="example" class="video" controls preload="none" width="500" height="300"
poster="abc.jpg" data-setup="{}">
<source src="../87D645D1d01.ogv" type='video/ogg' />
</video>
So is there any way with which we can browse a media file in our local file system irrespective of the OS and then add the pah to the SRC: part of video element like we do it in any desktop based video players and then play it?
Regards.
Anuj.