The code is:
<video controls="" autoplay="" name="media">
<source src="example.mp4" type="video/mp4">
</video>
but it didn't play on chrome ,and I've tried the code under:
if (window.chrome) {
$("[type=video\\\/mp4]").each(function () {
$(this).attr('src', $(this).attr('src').replace(".mp4", "_c.mp4"));
});
}
but it didn't work either. Does anyone has the same problem? Any solution?
Related
My Need
html5 video element loads both a video and a vtt file saved in a different domain.
The problem
vtt is not loaded and error Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.
My investigation
I am aware that CORS needs to be used so vtt can be loaded in html5 successfully.
I have enabled CORS on server side for requests from any domain.
Some articles say adding crossorigin or crossorigin="anonymous" into ` element can do the job, but it doesn't work. Either the video is not loaded at all or different errors appear
I have put my code here below
<body>
<div class="container">
<video id="myvideo" controls preload="auto" width="640" height="264" autoplay>
<source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source>
<track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default>
</video>
</body>
Hopefully this helps the next person to stumble upon this SO question. I discovered that IE (10 and 11) does not support loading a cross-origin VTT file for a <track>, even if CORS is enabled. In order to add IE support for captions, I had to use a script like the one below.
This script downloads each VTT file via AJAX, creates a blob URL, and replaces each <track> src with its respective blob URL.
window.addEventListener("load", function() {
if (window.navigator.userAgent.indexOf("MSIE ") < 0 && window.navigator.userAgent.indexOf("Trident/") < 0) {
// Not IE, do nothing.
return;
}
var tracks = document.querySelectorAll("track")
for (var i = 0; i < tracks.length; i++) {
loadTrackWithAjax(tracks[i]);
}
});
function loadTrackWithAjax(track) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200 && this.responseText) {
// If VTT fetch succeeded, replace the src with a BLOB URL.
var blob = new Blob([this.responseText], { type: 'text/vtt' });
track.setAttribute("src", URL.createObjectURL(blob));
}
};
xhttp.open("GET", track.src, true);
xhttp.send();
}
<video controls preload width="600" height="337.5" autoplay crossorigin="anonymous">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4"></source>
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
</video>
I can confirm that the crossorigin=anonymous attribute on the video element does indeed load the text track as expected.
Give this code a shot:
<video id="myvideo" controls preload="auto" width="640" height="264" autoplay crossorigin="anonymous">
<source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source>
<track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default>
</video>
Finally, remember, you must use a web server to serve this HTML snipped - this cannot be done locally (ie. file//).
If you're familiar with node - install http-server, run with --cors and use ngrok.
I am using videojs : http://videojs.com/
Can you guys please help me if I can play audio files using videojs library.
Example
<audio id="audio_example" class="video-js vjs-default-skin" controls preload="auto"
width="600" height="600" poster="/img/awesome-album-art.png" data-setup='{}'>
<source src="/audio/awesome-music.mp3" type='audio/mp3'/>
</audio>
I am working on a JS/HTML5 application that has to show the same video in two different places of the screen.
I can use any web browser I want - currently I am with Chrome.
Is it possible to display same video in two different places of the screen, or do I need to setup two different streaming sessions and take care of keeping them in sync?
Yes you can use same video src for two video players in the same page
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
For video player options below is the url
http://www.w3schools.com/tags/tag_video.asp
and you can test the example
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_autoplay
HTML
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
replace the html in w3schools Tryit Editor
I'm using video JS to embed a video, and using a javascript to call a function when the video is done playing.
The problem is that in ie8 and lower, it uses a flash fall back. Is there anyway to get the flash fallback to trigger some sort of 'on video ended' event?
Thanks!
Make sure you're using video.js's API rather than that of an HTML5 video element which may or may not be present. This works:
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://www.videojs.com/img/poster.jpg">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
<script>
//Forcing flash tech
videojs('MY_VIDEO_1',{"techOrder":["flash"]}).ready(function(){
this.on('ended', function(e){
alert('end');
})
});
</script>
I'm trying to embed a video on my website:
<video width="320" height="240" controls="controls">
<source src="new-slideshow.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
For some reason, the video is not loading, and I can see this information when I inspect the network request:
https://dl.dropbox.com/u/2241201/locker/Screen%20Shot%202012-11-14%20at%201.49.39%20PM.png
Why is the video being canceled?