I am working with the Ionic-Framework and I am using the Videogular plugin to play videos. But when I emulate it on the iOS it does not autoplay, while it does on desktop.
My HTML:
<videogular vg-width="config.width"
vg-height="config.height"
vg-theme="config.theme.url"
vg-autoplay="config.autoPlay"
vg-stretch="config.stretch.value"
vg-responsive="config.responsive">
<video class='videoPlayer' controls preload='none'>
<source src='assets/videos/level1.mp4' type='video/mp4'>
<source src='assets/videos/level1.ogv' type='video/ogg'>
</video>
<vg-overlay-play>Test</vg-overlay-play>
</videogular>
Modules:
angular.module('starter', [
'ionic',
'starter.controllers',
'starter.services',
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.buffering",
"com.2fdevs.videogular.plugins.poster"
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
});
})
You should use vg-autoplay="true" in videogular tag:
<videogular vg-autoplay="true">
Full Example:
<div class="videogular-container">
<videogular vg-player-ready="onPlayerReady()" vg-complete="onCompleteVideo()" vg-theme="config.theme.url" vg-autoplay="true">
<vg-video vg-src="config.sources" vg-tracks="config.tracks" vg-preload="config.preload"></vg-video>
<vg-controls vg-autohide="config.plugins.controls.autoHide" vg-autohide-time="config.plugins.controls.autoHideTime">
<vg-play-pause-button></vg-play-pause-button>
<vg-timedisplay>{{ currentTime | date:'mm:ss' }}</vg-timedisplay>
<vg-scrubBar>
<vg-scrubbarcurrenttime></vg-scrubbarcurrenttime>
</vg-scrubBar>
<vg-timedisplay>{{ timeLeft | date:'mm:ss' }}</vg-timedisplay>
<vg-volume>
<vg-mutebutton></vg-mutebutton>
<vg-volumebar></vg-volumebar>
</vg-volume>
<vg-fullscreenButton></vg-fullscreenButton>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-poster-image vg-url='config.plugins.poster'></vg-poster-image>
<div class="my-logo-layer" ng-show="API.currentState != 'play'">
<img src="http://www.videogular.com/img/videogular.png">
</div>
</videogular>
</div>
You can't autoplay on mobile devices, it is disabled by default by the OS.
I managed to get it to work but I don't exactly know how it worked. The last thing I tried was put autoplay="autoplay" in.
<videogular id="intro-video" vg-width="config.width"
vg-height="config.height"
vg-theme="config.theme.url"
vg-autoplay="config.autoPlay"
vg-stretch="config.stretch.value"
vg-responsive="true">
<video class='videoPlayer' autoplay='autoplay' webkit-playsinline>
<source src='assets/videos/level1.mp4' type='video/mp4'>
<source src='assets/videos/level1.ogv' type='video/ogg'>
</video>
</videogular>
Related
I have 2 videos as a background / z-index = 1.
2 columns divided the screen in 50/50 ratio z-index = 3. if mouse is hovering over first column, then first video is playing in background, when mouse is hovering in second column, first video is hidden and second video is playing in background.
It is working in CHROME browser, but it is not working in safari-doesnt play video nor sound.
Can you show me how to fix it please?
const boxes = document.querySelectorAll('.boxes')
const video1 = document.querySelector('.video1')
const video2 = document.querySelector('.video2')
boxes.forEach(box => {
box.addEventListener('mouseover', (e) => {
e.preventDefault()
const a = e.currentTarget.dataset.set
console.log(a)
if (a === '1') {
var promise1 = video1.play();
if (promise1 !== undefined) {
promise1.catch(error => {
console.log(error);
}).then(() => {
video1.classList.remove('hiddn')
video2.classList.add('hiddn')
video2.pause()
})
}
} else if (a === '2') {
var promise2 = video2.play();
if (promise2 !== undefined) {
promise2.catch(error => {
console.log(error);
}).then(() => {
video1.classList.add('hiddn')
video1.pause()
video2.classList.remove('hiddn')
})
}
}
})
})
<video src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" autoplay="true"></video>
<video src="video2.mp4" data-id="2" width="100%" class="hiddn video2" type="video/mp4" autoplay="true"></video>
It only works when including playsinline.
<video src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" autoplay="true" loop muted playsinline ></video>
<video src="video2.mp4" data-id="2" width="100%" class="hiddn video2" type="video/mp4" autoplay="true" loop muted playsinline></video>
Second solution :
if the first solution doesn't work, you may need to set the controls="true" flag.
<video loop autoplay controls="true" src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" ></video>
FYI: if you run it on apple device e.g. Ipad/Iphone and then turn off the low power mode it may works.
Now, I've been using NUXT with my own Django for a bit. I would like to know how in VUE I can add a button to the next video.
<video id="movieads" class="center" width="640" controls>
<source src="https://cdn.videvo.net/videvo_files/video/free/2013-08/small_watermarked/hd0983_preview.webm" type="video/webm">
</video>
<button v-on:click="">Next VDO</button>
And in javascripts i will use document.getElementById('movieads').src = OTHER_URL;
methods: {
Change() {
console.log("Skip Ads");
this.$refs.youtube.src =
"OTHERVDO";
console.log(this.$refs.youtube.src);
}
},
I am tryign to implement videojs in my reactjs project. I am providing "src" to video component as props. The plauer "No compatible source was found for this media.". Below is my code
initVideoJS = () => {
let self = this;
let that = this;
const options = {
fluid: true,
preload: "auto",
autoplay: false,
controls: true,
aspectRatio: "16:9",
loop: false,
// playVideo: false
}
myPlayer = videojs('video-el-p', options)
}
render () {
return (
<section className="assets-container-right" id="assets-container-right">
<div className="assets-container-wrapper">
<section className="video-container" id="video-container" style={{height: `${this.state.video_container_height}px`}}>
<div className="video-player">
<video onContextMenu="return false;"
ref={node => this.video_el = node}
className="video-js video-el vjs-big-play-centered vjs-default-skin"
id="video-el-p" loop={false} controls>
<source src={this.props.assetVersion && this.props.assetVersion.video.file} type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
</section>
But the same code works when I give a static video url as src. Also
this.props.assetVersion.video.file
is a valid video url. This url works on normal html5 video component. What am I doing wrong?
p.s. There is another videojs player instance used in some other page of the application. But that has different id. So I don't think that is affecting it.
I have implemented videojs multiple times but this is the first time I am coming accros this issue. Thanks in advance.
I think the issue is in the fact that the video source might be undefined as you are using a conditional <source src={this.props.assetVersion && this.props.assetVersion.video.file} type="video/mp4"/>
Perhaps try to only render the video element when ever the video src is not undefined. It would look something like this.
render() {
let video;
if (this.props.assetVersion) {
video = (
<video onContextMenu="return false;"
ref={node => this.video_el = node}
className="video-js video-el vjs-big-play-centered vjs-default-skin"
id="video-el-p" loop={false} controls>
<source src={this.props.assetVersion.video.file} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
);
}
return (
<section className="assets-container-right" id="assets-container-right">
<div className="assets-container-wrapper">
<section className="video-container" id="video-container" style={{ height: `${this.state.video_container_height}px` }}>
<div className="video-player">
{video}
</div>
</section>
I have made attempts to create an overlay play button for my HTML 5 video. I have created an example on Jfiddle - click here-This works fine. I have tried to integrate my fiddle onto my site however i am receiving the error message Cannot read property 'paused' of undefined. Believe this has something to do with the structure of my code. Below is a snippet of how my code is set up.
$('.video').click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="/assets/casestudies/marketingandcomms/ukcoffeeweek/coffee-video-poster.gif">
<source src="/assets/videos/coffee-video.mp4" type="video/mp4">
</video>
<div class="playpause"></div>
Can anyone point me in the right direction ?
you use two different html structures with wrong JQuery Selectors.
try the Following html and Jquery Codes:
DEMO: https://jsfiddle.net/9ewogtwL/150/
<div class="wrapper">
<video class="video">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>
with this JQuery Code:
$('.wrapper').click(function () {
var videoEl = $(this).find("video").get(0);
if( videoEl.paused ){
videoEl.play();
$(this).find(".playpause").fadeOut();
}else{
videoEl.pause();
$(this).find(".playpause").fadeIn();
}
});
DEMO URL: JSBIN-DEMO
JQUERY
$('.video').on('click',function () {
$player=$(this).find("video")[0];
if($player.paused){
$player.play();
$(this).find('.playpause').fadeOut();
}
else{
$player.pause();
$(this).find('.playpause').fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="">
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
<div class="playpause">PLAY</div>
<div>
I have a video in popup. When use below code on popup close, the video doesn't stop buffering and have the old video reference when reopen it. Here is the code:
HTML:
<div id="w_oPopup">
<div id="w_oPlayer">
<video id="w_oVideoFrame" autoplay loop controls tabindex="0" width="946" height="532" poster="">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
</div>
JS:
$('.w_cExitPopupButton').bind('click', onPopupBlockerClick);
function onPopupBlockerClick(e) {
$('#w_oPopupBlocker').hide();
//Here my tries...
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = "";
}
Try using the pause() method to stop the audio and set the audio path again and play. There is no stop() method to stop the video.
function stop_audio(){
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = " ";
}
function play_audio(){
$('#w_oVideoFrame')[0].src = "path of audio";
$('#w_oVideoFrame')[0].play();
}
use the currentTime on the selected video element
video.currentTime = 0;