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.
Related
I am just trying out Fancybox 4, adding it to an old static html gallery. I have added in the head:
<script src="https://cdn.jsdelivr.net/npm/#fancyapps/ui/dist/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fancyapps/ui/dist/fancybox.css" />
as specified, and each thumbnail image in my gallery links to a large image thusly:
<img src="01-Makeup-tb.jpg" alt="Makeup" />
Clicking a thumbnail opens the image directly in the same window, replacing the page. In the console, the following error is shown:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Function.value (fancybox.umd.js:2)
Apparently some other initialization is necessary, but I have no clue what is missing. Can anyone help me get this working?
So, stumbled on same issue, just load script in footer. If you are using theme enqueue, add true for loading in footer.
Then it will work.
Hopefully this helps you! :)
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 wanna learn how you guys can implement an embedded youtube video of personalize dimensions. I searched on Google "how to" and I tried some of the tips, but still not working. Can you help me ?
Create a new file index.html. Open it with your text editor (e.g., Notepad). Add the following to it:
<!DOCTYPE html>
<html>
<body>
<h1>My Embeded YouTube video</h1>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Change width="1280" and height="720" to the desired number of pixels. Change "https://www.youtube.com/embed/bWPMSSsVdPk" to whatever youtube video you want. For instance, if you'd like to change it to the following video: https://www.youtube.com/watch?v=ohr6O78jGzs
Just switch bWPMSSsVdPk to ohr6O78jGzs in the "https://www.youtube.com/embed/bWPMSSsVdPk" part, such that "https://www.youtube.com/embed/ohr6O78jGzs". Just note that not all videos are embeddable.
Open index.html with a browser. Just drag and drop it into the browser window.
Should do the trick.
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).
Can someone tell me how to stop IE8 printing the value of the href for an A tag next to the text. For example this markup
Some Link
When printed comes out as
Some Link(/site/page.html)
when printed. How can I stop this?
This doesn't happen for me in IE8 and I've never spotted it. I also can't find it in the Internet Options anywhere.
It is possible that you have some software on your computer that does this, for example AVG Anti-Virus adds content to web pages to tell you that it has checked the links being displayed for potentially harmful content - so your system-security software may be expanding all links to show you where they actually point, to prevent phishing attacks.
If you do have some anti-phishing software on your machine, you'll have to find the option within that.
Update - It is almost certainly some clever CSS.
I have created the following test page to demonstrate how you can add the URL to a link using CSS generated content. If this was used within a print stylesheet, this would explain how the URL is getting added to the link when you are printing the page. To stop this, you would have to save a copy of the web page, remove the style rule from the print-only style sheet and then open your copy and print it!
<html>
<head>
<title>Test</title>
<style type="text/css">
a:after {
content: " [" attr(href) "] ";
}
</style>
</head>
<body>
<h1>Test</h1>
<p>This is a test to see if this
Link Shows A URL</p>
</body>
</html>