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.
Related
The twitter timeline is not shown properly in the web browser even though it is the original code from the twitter publish website.
At first the timeline was shown as it should. Somehow after I refreshed the site with F5 it didn't work at all. Somehow at the X time I refreshed it worked. When I restarted my computer and wanted to work on the file again it didn't work. I'm not an expert on HTML but I think the problem may be in the script tag.
I looked up other questions here on stackoverflow but none of them helped me. My code had no problems before I tried out without the timeline.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/ErinCorleyGray/lists/stackers?ref_src=twsrc%5Etfw">A Twitter List by ErinCorleyGray</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
A timeline of the twitter list should be displayed instead I get only the text: "A twitter list by ..."
I just pasted your code onto a new html document and viewed it on my Chrome browser and I did not have an issue with viewing the timeline. I have attached a screenshot of what I see. Maybe it is a browser issue? screenshot of the top of the page
I got this embed script from the View Glass website video tab:(http://viewglass.com/videos/view-dynamic-glass-intelligence/)
type="text/javascript" id="vidyard_embed_code_lqsHrHITNPOc9zxsYyJVfw" src="//play.vidyard.com/lqsHrHITNPOc9zxsYyJVfw.js?v=3.1.1&type=inline&width=640&height=360"
And I am wondering how to stop the autoplay. Please let me know if you have any idea?
Thanks
You can use jquery to remove autoplay attribute from the video like this
$('.vjs-tech').removeAttr("autoplay");
or like this
document.getElementsByClassName('vjs-tech').removeAttribute('autoplay');
Use it like this
<p>
<script type="text/javascript" id="vidyard_embed_code_lqsHrHITNPOc9zxsYyJVfw" src="//play.vidyard.com/lqsHrHITNPOc9zxsYyJVfw.js?v=3.1.1&type=inline&width=640&height=360">
$(document).ready(function(){
document.getElementsByClassName('vjs-tech').removeAttribute('autoplay');
});
</script>
</p>
My wordpress home page has an embed video from youtube, I would like to change this embed video dynamically, without needing to edit my wordpress settings.
I tried to create a custom webpage redirecting to my video, so all I would need to do e run a script to change this page's URL, but it's not working, any clue on how to fix it?
I used to following code to redirect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1;url=http://https://www.youtube.com/watch?v=Eho8HDtkCiU">
<script type="text/javascript">
window.location.href = "http://https://www.youtube.com/watch?v=Eho8HDtkCiU"
</script>
<title>Page Redirection</title>
</head>
<body>
<!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
If you are not redirected automatically, follow the <a href='http://https://www.youtube.com/watch?v=Eho8HDtkCiU'>link to example</a>
</body>
</html>
Instead of redirecting them to the link, why don't you download the video using a YouTube to MP4 converter online, then keep that in the FTP of the WordPress. Then, perhaps you can use the video tag to show the MP4 file.
I want to use the Kaltura standalone HTML5 player with the VAST/VPAID ad support modules, but I'm at a loss. I'm not at all familiar with the Kaltura architecture, and thought I've found lots of detail and discussion in the Kaltura support documentation and community forums, I'm not having any luck getting it work. (Ex: http://www.kaltura.org/ad-support-integration)
I've setup the HTML5 player (kaltura-html5player-widget.1.6a_0.zip) in a local environment (running Apache and PHP on Linux), and I've downloaded the AdSupport modules from GitHub (https://github.com/kaltura/mwEmbed/tree/master/modules/AdSupport), but can't figure out how to load the AdSupport modules for use in the player.
Here's what I have so far, but nothing is loading:
<head>
<title>Simple Video Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Include jQuery -->
<script type="text/javascript" src="../jquery-1.6.4.min.js" ></script>
<!-- Include the css and javascript -->
<style type="text/css">
#import url("../skins/jquery.ui.themes/kaltura-dark/jquery-ui-1.7.2.css");
</style>
<style type="text/css">
#import url("../mwEmbed-player-static.css");
</style>
<script type="text/javascript" src="../mwEmbed-player-static.js" ></script>
<script>
mw.load("modules/AdSupport/resources/mw.AdLoader.js",function(){
mw.AdLoader.load( 'http://path/to/vast/ad.xml', function( adConf ){
// Now you can call addAdToPlayerTimeline with the adConf
mw.addAdToPlayerTimeline( embedPlayer, ['preroll', 'bumper','overlay', 'postroll'], adConf );
});
});
</script>
</head>
<body>
<h3>Simple video sample</h3>
<video id="vid1" width="480" height="300"
poster="http://www.iana.org/_img/2013.1/icann-logo.svg"
durationHint="33"
>
<source src="http://path/to/video.mp4" type="video/h264" />
</video>
</body>
The kaltura player support VAST/VPAID out of the box both javascript [html5] & flash.
in order to use it please get the latest from our main repository here : https://github.com/kaltura/mwEmbed
In order to use kaltura player without kaltura backend we develop a proxy layer that will enable you to decide from where do you want to get the video metadata and sources. this layer is still under development/qa but if you want to experience with it :https://github.com/kaltura/mwEmbed/tree/proxyPlayer
all the player details + API is on player.kaltura.com site.
we also have a nice studio in our KMC(management console) where you can configure your player and take the configuration for your own needs.
let me know if more details is needed.
thanks,
Probably not an answer you are looking for, but it looks like this is impossible without the Kaltura backend:
http://forum.kaltura.org/t/running-kaltura-standalone-player-with-vpaid-support/837
I am chasing the same, trying to find the HTML5 / Flash standalone player with the VPAID support.
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