I switched to VideoJS thanks to ridicilious pricing policy of JWPlayer.
The problem is, when the user starts the video on iOS, it toggles native fullscreen. I want control panel to be available on fullscreen mode but I couldn't manage it yet.
Code:
<video id="tvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="..." data-setup='{"language":"en", "controls": true,"autoplay": false, "fluid": true, "aspectRatio": "16:9", "playbackRates": [0.5, 1, 1.5, 2]}'>
<source src="..." type='video/mp4' label='240p' res='240'/>
<source src="..." type='video/mp4' label='360p' res='360'/>
<source src="..." type='video/mp4' label='720p' res='720'/>
<p class="vjs-no-js">Bu videoyu görüntülemek için lütfen JavaScript'i etkinleştirin.</p>
</video>
<script type="text/javascript">
var myPlayer = videojs("#tvideo");
myPlayer.videoJsResolutionSwitcher({
default: 'high',
dynamicLabel: true
});
myPlayer.persistvolume({
namespace: 'httpswwwseyredelimcom'
});
myPlayer.brand({
image: "...",
title: "...",
destination: "...",
destinationTarget: "_top"
});
myPlayer.ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableModifiersForNumbers: false
});
$(".bAd").detach().appendTo(".video-js");
$(".plAd").detach().appendTo(".video-js");
function resizeVideoJS() {
var containerWidth = $('.video-player').width();
var videoHeight = Math.round((containerWidth / 16) * 9);
myPlayer.width(containerWidth).height(videoHeight);
}
window.onresize = resizeVideoJS;
myPlayer.on("ended", function() {
startNextVideo();
});
});
</script>
How could I manage not getting autofull screen and let user have control panels on fullscreen?
Thanks in advance.
To preserve inline playing, add playsinline attribute to video tag.
Actually, this won't work as described for video.js. It works for the straight-up html5 player.
For video.js, you need to use .playsinline(true) as you do so set other properties on an object. You could call it on .ready().
This method worked for me:
instanceName.ready(function(){
myPlayer = this;
myPlayer.playsinline(true);
});
https://docs.videojs.com/player#playsinline
Related
I add videojs player to my VUE app and I have no idea how to add event listener to it. I need to track when player starts playing and stop or pause. I can't find anything related to it, the documentation doesn't provide this.
Here is how my setup looks like according to docs
this.player = videojs(this.$refs.videoPlayer, this.options, () => {
this.player.log('onPlayerReady', this);
})
Alright, this is just
this.player.on('play', () => {
this.play()
})
this.player.on('pause', () => {
this.stop()
})
VideoJS uses the HTML5 <video> element, so you can just use the events associated with that element.
Example:
document.querySelector(".video").addEventListener("play", (e) => {
console.log("playing...");
});
document.querySelector(".video").addEventListener("pause", (e) => {
console.log("paused...");
});
<link href="https://vjs.zencdn.net/7.20.1/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.20.1/video.min.js"></script>
<video class="video-js video" controls preload="auto" width="640" height="268" data-setup='{ "playbackRates": [0.5, 1, 1.5, 2],"loopbutton": true }'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>
I have a problem to get out the duration of an mp4 video file when the html document is ready. My code:
(function ($, root, undefined) {
$(function () {
'use strict';
$(document).ready(function() {
var duration = $("section:first-child() video").get(0).duration;
alert(duration);
});
});
});
The script works in firefox but in chrome it returns an NaN. Im not a javascript professional and i use wordpress HTML5 Blank theme.
Thanks for your help and best regards.
You need to preload the video metadata for you to be able to access them. Then, within the loadedmetadata event, you may access the duration as below.
$(function() {
var $video = $('#video_container').find('video');
$video.on("loadedmetadata", function() {
$('#duration').text($video[0].duration);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video_container">
<video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="metadata" controls="" width="400">
<source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
<source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
<source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
<div>Total duration : <span id="duration"></span></div>
you need a listener to get the duration of a video
var videoTime = 0;
var currentvideo = document.getElementById('video');
currentvideo.addEventListener('play', function() {
videoTime= currentvideo.duration;
console.info(videoTime) // get the duration
});
I need to be able to play an HTML5 video (mp4 format) from any arbitrary location.
<script src="{{ STATIC_URL }}mediaelementjs/jquery.js"></script>
<script src="{{ STATIC_URL }}mediaelementjs/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}mediaelementjs/mediaelementplayer.min.css" />
<script>
$(document).ready(function(){$('video, audio').mediaelementplayer({
// if the <video width> is not specified, this is the default
defaultVideoWidth: 480,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 270,
// if set, overrides <video width>
videoWidth: -1,
// if set, overrides <video height>
videoHeight: -1,
// width of audio player
audioWidth: 400,
// height of audio player
audioHeight: 30,
// initial volume when the player starts
startVolume: 0.8,
// useful for <audio> player loops
loop: false,
// enables Flash and Silverlight to resize to content size
enableAutosize: true,
// the order of controls you want on the control bar (and other plugins below)
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
// force iPad's native controls
iPadUseNativeControls: false,
// force iPhone's native controls
iPhoneUseNativeControls: false,
// force Android's native controls
AndroidUseNativeControls: false,
// forces the hour marker (##:00:00)
alwaysShowHours: false,
// show framecount in timecode (##:00:00:00)
showTimecodeFrameCount: false,
// used when showTimecodeFrameCount is set to true
framesPerSecond: 25,
// turns keyboard support on and off for this instance
enableKeyboard: true,
// when this player starts, it will pause other players
pauseOtherPlayers: true,
// array of keyboard commands
keyActions: [],
// start with English automatically turned on
startLanguage: 'en'
}
);});
<video id="demo" width="720" height="600" controls="controls" preload="auto">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="{{ STATIC_URL }}/video/sample.m4v" />
<!-- Optional: Add subtitles for each language -->
<track label="English" srclang="en" kind="subtitles" type="text/vtt" src="{{ STATIC_URL }}video/sample.vtt" />
</video>
Say I want to add a link that contains the time information (e.g., 10 seconds from the beginning), and when I click on it, the video should plays starting not from the beginning, but from 10 seconds and onwards. In the following transcript. The time 00:00:10 is a link that can be clicked on. Could anyone give me some pointers on how to do this?
...
Line 158: That is a good word. 00:00:10
...
The previous answer suggested to use currentTime(), which is a get/set method in HTML5 but only a get method in MEJS. You should rather use (MEJS') setCurrentTime(), to set the starting time so, having a button like
<button class="button" id="play">play : starts at 8 seconds</button>
... you could use this jQuery code :
var media; // we need this global variable
jQuery(document).ready(function ($) {
$("video").mediaelementplayer({
success: function (mediaElement, domObject) {
media = mediaElement; // make it available for other functions
}
});
$(".button").on("click", function () {
media.setCurrentTime(8); // set starting time
media.play();
});
}); // ready
... or you could have more buttons (with different IDs) to set more actions like
$("#parentContainer").on("click", ".button", function (event) {
if (event.target.id == "play") {
media.setCurrentTime(8);
media.play();
}
if (event.target.id == "pause") {
media.pause();
}
});
Note: video should be preloaded for set properties to work.
Use html5 player play() and currentTime:
HTML:
<button id="time" onClick="playVideo()">00:00:16</button>
<video id="demo" width="30%" height="auto" controls="controls" preload="auto">
<source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" />
</video>
JS:
<script type="text/javascript">
var time = document.getElementById("time").innerHTML;
var parts = time.split(':');
var seconds = (+parts[0]) * 60 * 60 + (+parts[1]) * 60 + (+parts[2]);
function playVideo() {
var video = document.getElementById("demo");
video.currentTime = seconds;
video.play();
}
</script>
<script src="jquery.js"></script>
<video id="video" controls preload="none" width="640" poster="http://media.w3.org/2010/05/sintel/poster.png" onloadedmetadata="$(this).trigger('video_really_ready')">
<source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
<source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
<source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg' />
</video>
<br />
<input type="button" id="capture" value="Capture" /> Press play, and then start capturing
<div id="screen"></div>
<script>
var VideoSnapper = {
/**
* Capture screen as canvas
* #param {HTMLElement} video element
* #param {Object} options = width of screen, height of screen, time to seek
* #param {Function} handle function with canvas element in param
*/
captureAsCanvas: function(video, options, handle) {
// Create canvas and call handle function
var callback = function() {
// Create canvas
var canvas = $('<canvas />').attr({
width: options.width,
height: options.height
})[0];
// Get context and draw screen on it
canvas.getContext('2d').drawImage(video, 0, 0, options.width, options.height);
// Seek video back if we have previous position
if (prevPos) {
// Unbind seeked event - against loop
$(video).unbind('seeked');
// Seek video to previous position
video.currentTime = prevPos;
}
// Call handle function (because of event)
handle.call(this, canvas);
}
// If we have time in options
if (options.time && !isNaN(parseInt(options.time))) {
// Save previous (current) video position
var prevPos = video.currentTime;
// Seek to any other time
video.currentTime = options.time;
// Wait for seeked event
$(video).bind('seeked', callback);
return;
}
// Otherwise callback with video context - just for compatibility with calling in the seeked event
return callback.apply(video);
}
};
$(function() {
$('video').bind('video_really_ready', function() {
var video = this;
$('input').click(function() {
var canvases = $('canvas');
VideoSnapper.captureAsCanvas(video, { width: 160, height: 68, time: 40 }, function(canvas) {
$('#screen').append(canvas);
if (canvases.length == 4)
canvases.eq(0).remove();
})
});
});
});
</script>
How can I add youtube video instead. Could not play youtube video in video tag. embed tag is working to play youtube video. How to take screenshot by placing youtube video inside embed tag. Please help me
I could solve this with ffmpeg.
Just run
ffmpeg -i inputfile.avi -r 1 -t 1 -ss 00:00:03 image-%d.jpeg
where
-i inputfile.avi - input file
-r 1 - one frame per second
-t 1 - how many seconds should be converted to images
-ss 00:00:03 - from what second to start
image-%d.jpeg - resulting filename template
Found here http://linuxers.org/tutorial/how-extract-images-video-using-ffmpeg
The following bookmarklet capture a Youtube video at click time, in the current video resolution and quality, as you are seeing it, but without the toolbars overlays.
javascript:void(function(){let canvas=document.createElement("canvas"),video=document.querySelector("video"),ctx=canvas.getContext("2d");canvas.width=parseInt(video.offsetWidth),canvas.height=parseInt(video.offsetHeight),ctx.drawImage(video,0,0,canvas.width,canvas.height);var base64ImageData=canvas.toDataURL("image/jpeg"),o = new Date(0),p = new Date(video.currentTime*1000),filename="📷Capture_"+new URL(document.location.href).searchParams.get("v")+"_"+document.title+"#"+new Date(p.getTime()-o.getTime()).toISOString().split("T")[1].split("Z")[0]+".jpg",a=document.createElement("a");a.download=filename,a.href=base64ImageData,a.click()}());
Enhancement of the bookmarklet found here https://github.com/ReeganExE/youtube-screenshot.:
Image served as file download.
Does not block the playing video.
The image title contains the Youtube ID, the video title, and the exact time of the capture in the video.
Modified to work also in Firefox
If manually set up image this might be help you.
Try add poster="placeholder.png" //photo you want to the video tag.
example
<video width="470" height="255" poster="placeholder.png" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<object data="video.mp4" width="470" height="255">
<embed src="video.swf" width="470" height="255">
</object>
</video>
My HTML5 Video Control API got a shape. But now the client asks me to show Poster once video played.
Now there is a dark black background.
Please let me know how I have to do that.
<video width="640" height="360" x-webkit-airplay="allow" poster="asserts/poster.png" preload="" tabindex="0" class="video1">
<source data-quality="sd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4"></source>
<source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.mp4"></source>
<source data-quality="sd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.webm"></source>
<source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.webm"></source>
</video>
And the Jquery funciton for play/ pause is:
/* Play/Pause */
var gPlay = function() {
if($hdVideo.attr('paused') == false) {
$hdVideo[0].pause();
$video_main_control.removeClass("hd-video-main-control-none");
$hdVideo[0].poster.show();
}
else {
$hdVideo[0].play();
$video_main_control.addClass("hd-video-main-control-none");
}
};
$video_main_control.click(gPlay);
$hd_play_btn.click(gPlay);
$hdVideo.click(gPlay);
$hdVideo.bind('play', function() {
$hd_play_btn.addClass('hd-paused-button');
});
$hdVideo.bind('pause', function() {
$hd_play_btn.removeClass('hd-paused-button');
});
$hdVideo.bind('ended', function() {
$hd_play_btn.removeClass('hd-paused-button');
});
<video width="640" height="360" x-webkit-airplay="allow" poster="asserts/poster.png" preload="" tabindex="0" class="video1" id="video_elem">
</video>
var showBanner = function () {
// Show your banner
};
document.getElementById("video_elem").addEventListener("ended",showBanner, false );
Video api has "ended" event for this purpose. Ref: https://developer.mozilla.org/en-US/docs/DOM/Media_events