I recently upgraded my account on Vimeo to be able to get my direct source file on a MP4 extension. Vimeo showed me several quality available for each of my videos.
I was wondering if there is a way to serve the user a specific quality based on its connexion?
By default I serve a SD quality video.
In the same response as the MP4 video file direct links, you should see an .m3u8 link. This link is an HLS manifest file that is used for adaptive streaming. You'll need to check if the player you're using supports HLS.
HLS documentation can be found here: https://developer.apple.com/streaming/
Thank you Tommy.
I was able to finally combine videojs + http-streaming and my .m3u8 link from VIMEO.
Note: It's important for people to have a VIMEO pro account if you want to be able to get your video source URL. Also the type must be ="application/x-mpegURL" and not the default "video/mp4".
<video-js id=vid1 width=600 height=300 class="vjs-default-skin" controls>
<source src="https://example.com/index.m3u8" type="application/x-mpegURL">
</video-js>
<script src="video.js"></script>
<script src="videojs-http-streaming.min.js"></script>
<script>
var player = videojs('vid1');
player.play();
</script>
Related
I need to play .ts streaming video file in mobile devices through a web page link, kindly provide me any example of it. I have tried video source tag with type "application/x-mpegURL" but it is not working. Can we call the .ts video file in a HTML5 video tag?
From this link (possible duplicate)
You are basically talking about Apple's HLS format. You can use an
html5 object in your web page. You can use http://osmfhls.kutu.ru/
flash plugin. You can use jwplayer. There are more choices (e.g.
flowplayer).
What I Have?
I have simple HTML code which play a video
<video src="">
<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg"
width="540" height="360">
</video>
What I Want?
I want to hide src attribute of video tag when someone open inspector/inspect element of browser.
That is simply not possible.
If you want the browser to play the video, you have to tell him the url.
If you've send the url to the client, the user can grab it.
even if you obfuscate the url, and decode it in JS, as soon as my browser requests the video, I can grab the url in the network-logs of my dev-tools.
If you actually want to protect your files from being downloaded you should consider using a streaming service and not http delivery. With HLS or MPEG-DASH you can DRM your content with encryption keys.
Otherwise there is no way, think how Youtube and Vimeo can't stop people from downloading their files...
i have a video player
<video id="myMovie">
<source src="vids/flv640x480/4fa2ab38f9237e9f2515812ee7fec1961d9c78d1.flv">
</video>
Now this video is not able to play in my browser chrome because its unsupported therefore i know flash is the way out but what do i need to do with flash. Install it on my server or what ?
Please anyone is there with a good explanation and steps of how to play flv videos in any browser ?
flv videos is not compatible with video tag
You have 2 options from here:
1.You use flash based video players (i.e. Flowplayer) or create your own
Here's a sample usage of flow player:
<!-- player container-->
<a href="http://yourwebsite.com/yourflvvideourlhere.flv" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
</a>
// install flowplayer
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
Convert your video file to a format that is compatible with video tag (i.e. mp4, webm)
I found other posts here for the same issue, like this or this but I wasn't able to solve my issue.
At first, I run below javascript:
<script type="text/javascript">
var options = JSON.stringify({'maxSize': 320, 'videoQuality': 6, 'noaudio': true});
ogg.encode(options);
</script>
Then I have below html:
<video id="video1" width="500" controls="controls" >
<source src="Rio2Trailer.mp4" type="video/mp4"/>
<source src="Rio2Trailer.ogv" type="video/ogg"/>
<source src="Rio2Trailer.webm" type="video/webm" />
The browser does not support HTML5 video.
</video>
I tried adding
AddType video/webm .webm
AddType video/mp4 .mp4
to the .htaccess file(which was empty) but no success.
On Firefox, i get the message:
No video with supported format and MIME type found.
On Chrome, I can just see the controls but they look like they are disabled and I don't see the play button in the middle of the screen as well.
Playing HTML5 video can be tricky. There are 3 things to check for:
check your MP4 files is properly encoded for web delivery. You can try to use handbrake or MP4Box or ffmpeg to repack your file. You need to activate the "web optimized" option (aka fast start) with handbrake.
check your server config: for mime types have a look here section "MIME Types Rear Their Ugly Head". Try to restart your Apache server after the changes in config. If it does not work in .htaccess try your site-wide httpd.conf. Other things to check includes CORS and 206 Partial Content/Range Requests
check your script/HTML5: try a barebone HTML5 video tag in a blank page with your mp4. If it works then scripts in your page may be affecting video playback. You can also check CPU load when playing back full HD videos.
I normally use videojs mp4 sample as a reference for a known working mp4/server config. This applies to mp4 but for webm/ogg as well (you can use make web video for transcoding to WebM or Ogg).
Let us know how it goes.
I recently added two videos on this website (link not working) and I got the videos playing (at the bottom). The only problem is that the video plays but doesn't display anything.
If you download the video and watch it locally, you'll see that the video is fine.
Since the video played on the website, I believe that the video link is correct. I've used the following script to make the video player working -
<script type="text/javascript" src="js/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("video1").setup({
flashplayer: "player.swf",
file: "images/vid1.mp4",
width: 570,
height: 320,
image: "images/preview1.jpg"
});
jwplayer("video2").setup({
flashplayer: "player.swf",
file: "images/vid2.mp4",
width: 570,
height: 320,
image: "images/preview2.jpg"
});
</script>
I'm not sure what's wrong with this. Help is greatly appreciated :)
The MP4 files need to be encoded in H.264. I just downloaded the vid1.mp4 file, and did a quick property inspector view in QuickTime, and the file is encoded in MPEG-4, which is not something that Flash, or HTML5 supports. If you do a re-encode to H.264, it will work. You can re-encode using this tool - http://handbrake.fr/
I downloaded the video, checked it, and the format was not one that Longtail supports. It needs to be mp4 with the H.264 codec.
Source:
http://www.longtailvideo.com/support/jw-player/28836/media-format-support
MP4 videos using the H.264 video codec and the AAC audio codec. MP4 is of high quality and can be played in all browsers and devices. It is today's video format of choice.
The JW Player video encoding guide should help.
http://www.longtailvideo.com/support/jw-player/28838/mp4-video-encoding
If you are not the video encoding type or do not want to download a new codec or application to encode I would suggest using youtube to upload and have them encode the video. You can then download the resulting mp4 file. If it works on youtube it should work using jw player.