I'm totally new to this kind of applications, so days ago I followed this tutorial and it worked fine with VLC. But when I tried the web browser check it didn't work.
So I searched for a new solution and found out about Video.js. All the tests that I tried failed, and in the last one, I got the message : The media could not be loaded, either because the server or network failed or because the format is not supported. The video is in MP4 format, how do I deal with HLS ? Knowing that I tried other scripts that should work fine with MP4 but since Flash is no longer supported it didn't work at all.
My code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="rtmp://localhost:1935/vod2/test_video.mp4" type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/#videojs/http-streaming/dist/videojs-http-streaming.js"></script>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>
Please can you help me, I've been working on this for two weeks now, I've never done this kind of code so please bear with me. Thank you.
try to streaming video from my Amazon Cloudfront. I have created a bucket with html page (jwplayer.html), video (process.mp4) and jwplayer (uploaded from official website). Also I create a CloudFront web distribution and CloudFront RTMP distribution.
Add to jwplayer.html next code:
<HTML>
<HEAD>
<TITLE>Amazon CloudFront Streaming with JW Player 6</TITLE>
<script type='text/javascript' src='https://d7io7dti9fwp9.cloudfront.net/video/jwplayer-7.2.4/jwplayer.js'></script>
<script type="text/javascript">jwplayer.key = "AHKJ8oqvx6qWX8d9RY00tDP7VTETGz814NNzLw==";</script>
</HEAD>
<BODY>
<H1>This video is streamed by CloudFront and played by JW Player 6.</H1>
<div id='mediaplayer'></div>
<script type="text/javascript">
jwplayer('mediaplayer').setup({
file: "rtmp://s2z3jy56jskpuw.cloudfront.net/cfx/st/mp4:process.mp4",
width: "720",
height: "480"
});
</script>
</BODY>
</HTML>
Here is my result:
http://d7io7dti9fwp9.cloudfront.net/jwplayer.html
This solution does not work in my browser.
I think you are taking help from this tutorial
http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/TutorialStreamingJWPlayer.html
They have explained everything. there might be file permission issues.
Take a look there once.
Thanks
I am trying to test Ooyala HTML5 Player using Google Chrome v45.0.2454.85 m. I signed in using a trial account of Ooyala and uploaded one video in the Backlot UI that has .mp4 extension.
There is one Basic HTML5 tutorial to view the Ooyala player. I followed that tutorial but I am getting the below error when I am trying to test the webpage:-
"Invalid Content Specified. Error #2048".
I am using Tomcat as local server on my machine.
Here is the code
<!DOCTYPE html>
<html>
<head>
<title>My Test Player V3 Web Page </title>
</head>
<body>
<script src='http://player.ooyala.com/v3/a163e2d9a4b6427e9baad33e86d94136'></script>
<div id='ooyalaplayer' style='width:640px;height:360px'></div>
<script>
OO.ready(function() {
OO.Player.create('ooyalaplayer', 'psOWwzeDqaYbIx19WKyhGMigX7uyg_yS');
});
</script>
<noscript>
<div>
Please enable Javascript to watch this video
</div>
</noscript>
</body>
</html>
Can anybody help to solve this?
Thanks.
I'm trying to implement videoJS in the HTML5 Boilerplate. I've tried pasting the embed code suggested by videoJS but the results don't work. When the page loads the "poster" image appears but the loading wheel never stops and the video never plays.
I've tried including this in the header and footer to get the video started, but it hasn't worked:
<script>
window.onload = function() {
var pElement = document.getElementById("#vid");
pElement.play();
};
</script>
I've also included all the video.js ref links in the header:
<!-- Link to Video JS Library -->
<script src="js/mylibs/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<script type="text/javascript" charset="utf-8">
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
</script>
Does anyone have an example of good HTML5 video implementation with the HTML5 Boilerplate template. Admittedly I'm a noob so I apologize if this question seems kind of daft.
Thanks for your help!
You should probably not be including them in <head> and footer. You should just include that script you pasted at the beginning at the bottom after that video.js ref links set of scripts.
You can always paste your code at http://jsfiddle.net and ask again so it can be fixed more quickly.
I just been looking at the Steam website and noticed it doesn't use Flash.
What technologies are being used to create the page? For example the slide bar to scroll through the different games, how exactly is that happening?
Javascript, and lots of it. From the page's head:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Steam</title>
<link href="http://cdn.store.steampowered.com/public/css/styles_storev5.css?v=221260115" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]> <link href="http://cdn.store.steampowered.com/public/css/styles_storev5_ie6.css?v=3855293424" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]> <style type="text/css"> .iepoupfix{ display: block; } </style> <![endif]-->
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/swfobject.js?v=3216748271&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/prototype-1.6.0.2.js?v=1627908004&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/scriptaculous/scriptaculous.js?v=1333279996&l=english&load=effects,controls,slider"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/javascript.js?v=853265233&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/main.js?v=199395227&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/jserrorreport.js?v=19341832&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/header.js?v=318945778&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/search.js?v=630051104&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/cluster.js?v=4033443305&l=english"></script>
<link rel="search" type="application/opensearchdescription+xml" title="Steam Search" href="http://store.steampowered.com/public/open_search.xml">
</head>
Notable libraries: Scriptaculous. Prototype. swfobject.js! Strangely that last one is actually supposed to be useful for embedding flash, though I'm not sure if it's in use on that page (perhaps just elsewhere on the site for movies or audio).
The scrollable "games" section is most likely a <div> with an overflow scrollbar. The arrows are probably links to a javascript call. Since it's fixed width, it just uses javascript to scroll the box by "width x."
For the most part that page is just JavaScript, HTML, and CSS.
It's not necessarily AJAX, although it may request those images from the server "on demand" to lessen server load, instead of prefetching them.
My awesome Chrome Sniffer Chrome extension tells me that this site is using script.aculo.us, which is a Javascript library similar to MooTools and jQuery. Dynamic javascript is being used for lots of neat effects these days.
Most none-flash solutions are likely to be using either a combination of XHTML and Javascript (often JS libraries such as jQuery or Prototype, or Microsoft's flash competitor - Silverlight.
The steam website seems to be using something along the lines of the very popular jQuery and jQuery Tools (Scrollable plugin). The scrollable plugin with jQuery Tools is really quick and easy to set up and really useful for displaying content and images. I've used it on several clients' websites with positive results.
UPDATE: looking at the source it seems that Steam is actually using the also-popular Prototype library but it's a very similar concept to jQuery and the scrollabel plugin.
In addition to Tchalvak's reply (I can't comment yet), swfobject, which is used to embed Flash objects, is used for trailers which are shown in a corner when you choose to view a detailed description of a game.
Its also used to preview Trailers before downloading the high-quality (usually HD) version as a "Media" item in the Steam client.
They are using JavaScript for all this stuff. If you look at the page source you can see that the prototype.js and scriptaculous libraries are both included by the page.
hey, it uses script.aculo.us, which on its behalf is based on Prototype. I didn't see anyone noting that.
prototype, jQuery, MooTools and such are just frameworks. You can do the same if you write your own javascript functions.
They just provide ready-to-go functions for AJAX, animation effects, advanced DOM traversal, slides etc. And the reason i'm using them is animation smoothness - i've written my own functions when i couldn't include jQuery.
Like you tagged, ajax, or other forms of javascript.
You may have a look at this: http://w3techs.com/sites/info/steampowered.com