I answered this question, which asks how to be able to start/stop an audio clip on mouse enter/leave. I came back to it while later after seeing the new runnable code snippets and wanted to play around with it by altering my existing answer. However, the question pertains to using an <audio>
tag with audio <sources>
which have to be loaded.
I know that we are able to use images in code snippets fairly easily and be able to detail an answer, but with media types becoming more and more usable, it would be helpful to have some set of Stack Overflow hosted content that you could include in a snippet as a resource without dealing with cross-origin problems.
Bear in mind, I'm not asking for users to be able to upload their own files with questions similar to what this question is asking for, I'm talking about static, unwavering, known resources that don't grow in size or change in content.
Also, I'm not asking for a giant HD movie to be hosted on the site, but it would be helpful to be able to throw something like:
<video>
<source src="examplefiles/vid.webm">
</video>
And have it work from within the runnable snippet even if it were just a five second SD animated Stack Exchange logo.
Consider the following runnable that would utilize a statically hosted image (we can do this right now with the Stack Overflow banner image).
var rot = 0;
(function spinImage(timestamp) {
$("#spinner").css({
"transform": "rotate(" + (rot++) + "deg)"
});
window.requestAnimationFrame(spinImage);
}())
body {
background-color: grey;
}
.cropped {
width: 180px;
height: 50px;
overflow: hidden;
background-color: white;
}
.cropped img {
width: 200px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spinner" class="cropped">
<img class="cropped" src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc6a0c03b68">
</div>
If not, what are some services for media content, whether it be images, audio, video, or whatever, that you can utilize from within a code snippet without being bothered by cross-origin problems?
An additional note pointed out by cornergraf which further emphasizes the benefit of providing statically usable resources.
It is important that any content used for answers does not suddenly disappear or change in the future - this is essentially why link-only answers are frowned upon. We can guarantee this only if Stack Overflow hosts these resources, using random third-party sites is too risky