Got the following case
- if video
- if controls
video controls="true" loop="true" muted="true" playsinline="true" uk-video="autoplay: false"
source src="#{rails_blob_path(media)}" type="video/mp4"
- else
video loop="true" muted="true" playsinline="true" uk-video="autoplay: false"
source src="#{rails_blob_path(media)}" type="video/mp4"
2 questions,
how to avoid ="true" for the video attriutes, the browser dont need them, just the slim engaine
Is it possible to inline the if inside the video tag and avoid the code duplication elegantly?
I believe this example answers both of your questions:
- video = true
- controls = true
- if video
video controls=controls loop=true muted=true playsinline=true uk-video="autoplay: false"
source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"
You can provide boolean values instead of strings. So for example loop="true" becomes loop=true. There are multiple ways to achieve similar result with Slim, but to the best of my knowledge, you cannot get pure standalone attributes with Slim's standard config and instead, it will render attributes with empty strings as values. So you have <element attribute="true">, want <element attribute> but will get <element attribute="">.
If you switch to booleans instead of strings, you can "avoid the code duplication elegantly", for free. Just set controls value to true or false (judging from your code example, it looks like you have already done that)
Related
I have the following code in my razor view which outputs the source tag:
#Html.Raw("<source src=\"" + #mediaItem.Url + "\" type=\"" + #mediaType +"\">")
It is looped x number of times depending on the presence of multiple file formats.
The issue being that the output returned is as following.
<video><source src="x.mp4" type="video/mp4"><source src="x.webm" type="video/webm"></source></source></video>
Which gives me an w3 validator error on stray end tags for
I have no idea where or when the tags are being closed or why.
Any ideas on how to stop it from closing the tags?
A bit more of the code, updated the source part to not use Html.Raw per suggestion, but still generates the same issue.
<video id="frontCoverVideo" width="1920" height="450" playsinline autoplay loop muted controls>
#foreach (var mediaItem in coverMedia)
{
<source src="#mediaItem.Url" type="#mediaItem.Type">
}
</video>
Why are you using Html.Raw in this case? It's not recommended to use it that way. I don't see any reason.
Assuming the Video Sources are a List<VideoSource> in your ViewModel.
<video>
#foreach(var source in Model.VideoSources)
{
<source src="#source.Url" type="#source.MediaType" />
}
</video>
Any reason for not doing it the standard way?
UPDATE: Changed Code, added self-closing Source Tag to maybe fix issues lying within Umbraco
I wrote a basic range request class I was wanting to flesh out so html5 video and audio players could interact with my MVC app.
I have it functioning (but not fully featured for things like If-Modified) if I don't add the extension to the 'src' tags. Thing is on the routing I can't get any string with a "{filename}.{extension}" style of route to work. My guess is anything like that is assumed to be a static file and thus I never get the opportunity to fulfill the request. If I add a source without the extension it works.
So this works
<video id="my-video-player" class="video-js" controls preload="auto" width="640" height="264" src="#Url.Action("Index","Video",new { id = "SampleVideo_1280x720_20mb" })" 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>
but this doesn't
<video id="my-video-player" class="video-js" controls preload="auto" width="640" height="264" src="#Url.Action("Index","Video",new { id = "SampleVideo_1280x720_20mb.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>
Does anyone know how I could make certain extensions potentially reroute to a handler of my choosing?
Edit:
Linked below is a method to make it work on 1 path, ideally I'd like to inject it so I could do it for any path, so I'd like to keep it open to see if anyone has more insight. As this method still would require you to have an IgnorePath also to make sure any direct path to your media files aren't handled by the static file handler instead of your MVC path.
<system.webServer>
<handlers>
<add name="Media-Handler" path="/Video/*" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/>
</handlers>
</system.webServer>
I have a simple view that I'm using to test out video.js; it looks like this:
<script type="text/javascript" src="~/Scripts/video.js"></script>
<link href="~/Content/video-js.css" rel="stylesheet" type="text/css">
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<body>
<video id="testPlayer" class="video-js" controls preload="auto"
poster="~/Content/images/video-js.png"
data-setup="{}">
<source src="<url of a .mp4 file stored in my project>" type="video/mp4" />
</video>
</body>
After the page loads, I see the poster on the video player (along with some metadata information below the player that I haven't figured out how to get rid of yet). With preload="auto" I see ["Video Error", Object] immediately on page load in the console (using Chrome). If I change auto to none, I get the same non-descript error when I click the player. I cannot figure out what the problem with this error.
There doesn't seem to be any information tucked in the object that shows in the console. The best I could find, as far as description, was something that said media error. I've tried messing around with the encoding of the file a few different ways, but I consistently get the same error.
Does anyone see anything wrong with the view that I am missing (or know what in the world this error could mean)?
When specifying my source URL I was specifying it like this:
src="~/Content/something/place/etc.mp4"
Upon changing that URL to
src='#Url.Content("~Content/you/get/the/point.mp4")'
The video loads fine. I stumbled on some post that mentioned the video tag needing an absolute path, and took a stab trying this.
Forgive me if this is the wrong venue for this problem, but Google's deprecated developer forums recommend I go here.
Following is some heavily-simplified code meant to demonstrate the problem:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(
function() {
/*
This one second delay is just there to give the player time
to load. It's more complicated in my proper implementation.
*/
window.setTimeout(
function() {
var player = document.getElementById('player');
/*
Shocker, it doesn't work, regardless of playlist ID.
*/
player.loadPlaylist(
{
list: 'PL63FA01F86C3FE49A'
}
);
},
1000
);
}
);
</script>
</head>
<body>
<object data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3" height="360" id="player" width="600">
<param name="AllowScriptAccess" value="always">
<param name="movie" value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">
</object>
</body>
</html>
I've stumbled on this very problem while on a coding sprint, this week:
The loadPlaylist/cuePlaylist methods require both the list parameter and the listType parameter (it isn't very clear in the docs).
So, the code:
player.loadPlaylist(
{
list: 'PL63FA01F86C3FE49A',
listType: 'playlist'
}
);
Should work fine, both with SWF and HTML embeds. Jeff Posnick's recomendations on his answer to this question apply as well of course, but I've tested it to work in both scenarios.
listType can be 'list', 'search' or 'user_uploads', and list represents a list id or array of video ids, a search query, ou a user id, respectively.
A few comments on your code before getting to the question: first, if you're sure that you need to use the AS3 chromeless player, you really should use SWFObject to add it to your page to ensure that the proper <object> and <embed> tags are both used. If you only specify <object> tags then it will only work in Internet Explorer.
Also, you should have a onYouTubePlayerReader(playerId) handler in your code to detect when the player is fully loaded and ready to respond to API calls. That's much, much more reliable than attempting to do that via a window.setTimeout().
Regarding your actual question, I'm not sure that the chromeless AS3 player ever supported working with playlists. Was this code previously working that recently stopped? I'd imagine that you'd have a much better experience using the iframe embedded player and specifying controls=0 if you really don't want controls (but hiding the controls takes away from the playlist experience).
I'm working on Ruby on Rails 2.3.8 and the last version of rails tinyMCE plugin.
I would like users to have the ability of adding all kind of videos into the text editor. As it's now, they can add Youtube videos, and also they can upload them from their computer.
The problem is that Vimeo videos don't only create a common HTML <object> code, but they create an iframe for them, and if I try to import one of them using the Media plugin, I'll have to paste this video for example: http://vimeo.com/16430948, and it will generate the following HTML (which won't work):
<object width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="http://vimeo.com/16430948" name="src"><embed width="100" height="100" type="application/x-shockwave-flash" src="http://vimeo.com/16430948">
</object>
While Vimeo videos need the following HTML for being displayed:
<p><iframe frameborder="0" height="225" src="http://player.vimeo.com/video/16430948" width="400"></iframe></p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="100" width="100">
<param name="src" value="http://vimeo.com/16430948" /><embed src="http://vimeo.com/16430948" width="100" height="100" type="application/x-shockwave-flash"></embed>
</object>
Now, which is the difference between this two generated HTML? It's that the iframe is missing in the first code I've posted, so it doesn't work.
So, the question is: how do I add that iframe to the tinyMCE programmability so it's automatically added when a Vimeo video is embedded?
Well, you should write your own plugin (it is pretty simple) to check for changes the user made.
When a user entered a vimeo link you just grab the relevant content from the editor and put it into a new element (an iframe).
Your code should look something like this (you will have to modify it, but i am sure you will get the right direction):
// you may choose an other event to check for
ed.onChange.add(function(ed){
var body = ed.getBody();
// check for vimeo using jquery object
$(body).find('param').each(function(index, Element){
// vimeo adress is found in value
if (this.value.search('http://vimeo.com') == -1) return;
var node = this;
var iframe_not_parent = 1;
while(node.nodeName !== 'body'){
node = node.parentNode;
if (node.nodeName !== 'iframe'){
iframe_not_parent = 0;
break;
}
}
// ok, this vimeo thing is not inside an iframe - put it inside
if (iframe_not_parent){
with(document.getElementById(iframe_id).contentWindow){
var new_iframe = document.createElement("iframe");
this.parentNode.parentNode.append(new_iframe);
new_iframe.append(this.parentNode);
}
}
});
});