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);
}
},
Related
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>
How can i play audio on my web (even for mobile) by Java script but just put Js code one times in .tpl file. I use NukeViet CMS, if i use the code below for each audio my web will hardly load.
var audioTagged = document.getElementById('audioID');
audioTagged.src = 'http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3';
audioTagged.load();
<p onclick="triggerAudio()"><img src="http://caicay.vn/uploads/news/loa.gif" /></p>
I want to put js code one times in header tag and for each audio i just insert code like this <span class="uba_audioButton" media-url="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3"></span> in editor.
I want to play audio code like http://www.tienganh123.com/tieng-anh-pho-thong-lop-8-bai-1/2604-vocabulary.html , the image hasn't to change when clicking on the bottom, just simply click-play then click-pause.
Use Audio class of JavaScript.
Check out this fiddle.
Here is the snippet.
function triggerAudio() {
var file = new Audio('http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3');
file.play();
}
<p onclick="triggerAudio()">
<img src="http://caicay.vn/uploads/news/loa.gif" />
</p>
According to the requirement mentioned in the comments by the OP, this might solve the problem.
Check out this updated fiddle.
Here is the snippet.
function triggerAudio(abc) {
var playid = abc.id.substring(4);
document.getElementById("audio" + playid).play();
}
audio {
display: none;
}
<p id="play1" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />AFFECT</p>
<p id="play2" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />ANNOY</p>
<p id="play3" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />BALD</p>
<p id="play4" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />BLOND</p>
<p id="play5" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />CHARACTER</p>
<audio id="audio1">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/affect.mp3" type="audio/mp3" />
</audio>
<audio id="audio2">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/annoy.mp3" type="audio/mp3" />
</audio>
<audio id="audio3">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/bald.mp3" type="audio/mp3" />
</audio>
<audio id="audio4">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/blond.mp3" type="audio/mp3" />
</audio>
<audio id="audio5">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/character.mp3" type="audio/mp3" />
</audio>
This solution contains very little Javascript which you don't need to write separately for every audio you want to play.
Add as much <audio> you need in the HTML part and this will still work for you.
If the CMS you are using do not allow onclick trigger, then you can register event listeners using javascript.
var elements = document.getElementsByTagName("p");
for(i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
triggerAudio(this);
});
}
Here is the fiddle with event listeners registered using javascript.
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>
Is it possible somehow in jQuery to hide specific video or source element?
<video id="one" autoplay width="300px" height="300px">
<source src="media/sample3.mp4" type="video/mp4" />
</video>
<video id="two" autoplay width="300px" height="300px">
<source src="media/sample.mp4" />
</video>
I would like to play sample3, for example, for 1 minute, then pause sample3, hide it, show sample.mp4 and play that video.
Any suggestons?
My code which I tryed:
var video = $('video').get(0).pause();
if ($('video').get(0).paused) {
$('video').get(0).hide();
};
but the $('video').get(0).hide(); throws Uncaught TypeError: Object #<HTMLVideoElement> has no method 'hide'
I would try something like this
$(document).ready(function(){
var one = $('#one');
var two = $('#two');
play_sound(one);
setTimeout(function(){
pause_sound(one);
one.hide();
two.show();
play_sound(two);
setTimeout(function(){
pause_sound(two);
}, 180*1000);
}, 60*1000);
});
function play_sound(var file){
file.play();
}
function pause_sound(var file){
file.pause();
}