Is it possible to make video.js use the fallback flv videos as standard in IE? I can't get mp4 to work in Internet Explorer but flash works as long is there is no mp4 available.
First load the player script/css then we set up our "default" tech order. After that we use the IE Conditional comments to detect IE and set its tech order.
<link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.6/video.js"></script>
<script>
var techOrderArr = ["html5", "flash"]; // Default for everyone
</script>
<!--[if IE]><script>
techOrderArr = ["flash","html5"]; // IE specific
</script><![endif]-->
After that, setup your video as normal using the javascript initialization, but include the techOrder parameter.
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg">
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
<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>
<script>
videojs("MY_VIDEO_1", {
techOrder: techOrderArr
});
</script>
Related
I am using Video.js to play a video on my site and would like to disable the default double click to full screen behaviour.
I found this in the docs but not sure how to implement it. I have tried placing the suggested code in my main.js file but I guess I need to do something else as that doesn't work?
This is the simplified video.js code I'm using:
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.8.2/video.js"></script>
</body>
</html>
As you're using data-setup to init the player, then add it to the JSON string:
data-setup='{"userActions": {"doubleClick": false }}'
In my HTML for each source I wanted to use javascript to insert the correct video to the matching source as follows.
<script type="text/javascript">
var 1_video = '1.mp4';
var 2_video = '1.webm';
var 3_video = '1.ogv';
</script>
<video width="320" height="240" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source src="" type="video/mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source src="" type="video/webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source src="" type="video/ogg" />
</video>
All the examples I find keeping using jquery and I don't want to use jquery or any external library.
What is the best way to do this.
I would do something like this but I want to achieve this without using HTML id="idname" tags on my video and source element.
document.getElementById('video').src = 1_video;
Thanks for reading and any help / guidance that can be given.
you try to select an object with "video" id so try to add id to your sources:
<video width="320" height="240" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source src="" id="source-mp4" type="video/mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source src="" id="source-webm" type="video/webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source src="" id="source-ogg" type="video/ogg" />
</video>
document.getElementById('source-mp4').src = 1_video;
document.getElementById('source-webm').src = 2_video;
document.getElementById('source-ogg').src = 2_video;
You could could have a video container, and every time you selected a new video, you could create a new element inside the container and destroy the old by using removeChild
/*Destroy current element inside the container*/
container.removeChild(element);
/*Create new element in the container*/
var element = container.createElement("VIDEO");
element.src = XYZ-video;
if you gave the video an id say equal to "webVideo" or something, you could get the id, then use query selector to target the source tag within that id.
var videoSource = document.getElementById("webVideo").querySelector("source");
videoSource[0].src = "1_video";
Then use the videoSource[0] for mp4 videoSource[1] for webm and [2] for ogg
I have a javascript code like below:
<script type="text/javascript" charset="utf-8">
function addmsg(count, play){
if(play == 'true')
{
$("#my_audio").get(0).play();
}
}
</script>
<html>
<audio id="my_audio" src="popsound.mp3"></audio>
</html>
In the above code "play" variable is like a flag containing true or false value, and it plays the sound when play=='true'.The above code is working fine on my laptop browser,but when I'm accessing the page through my mobile the sound doesnt gets played. I did some research but I'm unable to figure out how to do it in my case. I'm very new to this field so sorry if this question is senseless, but can any one please help me. I wanted to make it work fine for mobile browser's too.Thank you in advance.
You need to put different formats for all devices (.ogg and .mp3).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Source : http://www.w3schools.com/html/html5_audio.asp
I'm using the Video.js player to stream live content from my local webcam (but I guess that should not matter in that case, it could be any live stream from web). I wrote a really simple code:
<head>
<link href="video-js.css" rel="stylesheet">
<script src="http://www.andy-howard.com/js/libs/jquery-1.8.2.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
</style>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls"
preload="auto" data-setup='{}' autoplay="true" >
<source src="http://10.172.180.31:8090/live.flv" type="video/x-flv">
</video>
</body>
And now in that configuration I see the stream content, but there are couple errors:
1) I don't see the controls (to pause the stream)
2) Stream looks like this, so the video is not resized to the full size of the component. BUT (and that's really interesting) when I resize the elements on the webpage (e.g. in Chrome by holding control and scrolling the mouse wheel) to 110%, then the video fills the whole component. Seems like a bug in video.js or maybe my implementation is wrong?
3) when I remove the parameter autoplay="true" - nothing shows up, controls and video is gone and it's impossible to play it.
4) I wanted to remove the autoplay="true", but adding the poster info by including poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" - nothing has changed, the stream is not visible, the controls are not there.
5) when I remove the data-setup parameter and leave it like this:
<video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls"
preload="auto" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" > then the controls and poster are visible (which is great!), but the play button is greyed out and it's impossible to play my stream.
I want to achieve the effect that after loading the webpage I can see the poster image with play button, and when I click it - I will see the properly resized stream. What am I missing?
Thanks!
Try it without the controls
This works for me:
<video id="se_videojs" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" height="auto" width="auto" data-setup="{}">
<source src="http://server/playlist.m3u8" type="application/x-mpegurl">
</video>
First of all, try to use the lastest release of video.js, you are using 3.2 version...
<link href="http://vjs.zencdn.net/4.12.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12.6/video.js"></script>
Secondly, if you are trying to use a live (stream) with videojs, you should see how videojs reads the stream sources: https://github.com/videojs/video.js/blob/master/docs/guides/tech.md#enabling-streaming-playback
Note that streaming urls need to have a specific pattern:
{protocol}://{your.streaming.provider.net/cfx/st}/{format}:{videoURL}.{format}
FLV is a video container, not a protocol, you should use a stream protocol such a RTMP(Flash), HDS(Flash), Mpeg/Dash or HLS(Apple).
Regards,
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me