See working link.
On the homepage I have two videos (#intro_video & #video_container) which under chrome I have no problems, but in firefox and IE the video doesn't play. It's loading the preview image but when you click play it tries to load for a moment and then goes back to the preview.
I have tried using Jquery Flash (loads #intro_video):
var so = new SWFObject('/swf/player.swf','ply','670','300','9','#000000');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('playlistfile','/videos/home.rss');
so.addVariable('playlist','left');
so.addVariable('playlistsize','240');
so.addVariable('bufferlength','15');
so.addVariable('plugins','fbit-1');
so.addVariable('dock','true');
so.addVariable('skin','/swf/modieus.swf');
so.addVariable('lightcolor','CC3399');
so.write('video_container');
and the recommended javascript (#video_container) from the wizard with no luck:
$(document).ready(function(){
// intro video
$('#intro_video').flash({
src: '/swf/player.swf', width: 367, height: 260,
flashvars: {
allowfullscreen: 'true',
allowscriptaccess: 'always',
wmode: 'opaque',
file: 'http://www.888behindthescenes.com/media/videos/intro2.flv',
image: '/images/sized/media/videos/previews/intro-370x228.jpg',
skin: '/swf/modieus.swf',
backcolor: '000000',
frontcolor: 'FFFFFF',
lightcolor: 'CC3399'
}
});
});
The flash is loading fine, just not the videos. Any help is appreciated.
Fixed by adding:
AddType video/x-flv .flv
to htaccess.
Related
I'm trying to layer multiple transparent .webm videos using A-Frame's <a-video> to give a pop-out effect, yet some videos just don't load on mobile.
For example, I have three test videos that are suppose to automatically play:
the back video is an mp4 on an <a-plane> as a material
the middle is a .webm file I created in After Effects on an <a-video>
the front video is also a .webm file I created in After Effects on an <a-video>
IMG: On Mobile
IMG: On Pc
For some reason the middle video never loads on mobile. I swapped it out with a .mp4 video and that worked fine. So I tried exporting the middle video as an .mp4, however the error still persisted!
I went through some github/stackoverflow and found posts talking about a similar issue (it's apparently been a long-running issue), but none of the fixes/workarounds really worked.
The resources I found:
https://aframe.io/docs/1.2.0/introduction/faq.html#can-i-render-youtube-videos-as-a-texture
https://github.com/aframevr/aframe/issues/316#issuecomment-170182397
https://www.reddit.com/r/WebVR/comments/40b3d2/using_aframe_video_works_on_pc_but_is_black_on/
And my code isn't doing anything fancy (HTML, just body):
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs="sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;">
<a-assets>
<video id="vid-1" loop="true" crossorigin="anonymous"
src='https://kucdinteractive.com/aomar/interactivespace/vid/LWA-ED.mp4'></video>
<video id="vid-2" loop="true" crossorigin="anonymous"
src='https://kucdinteractive.com/aomar/interactivespace/vid/Test_Webv2.webm'></video>
<video id="vid-pg4" autoplay loop="true" crossorigin="anonymous"
src='https://kucdinteractive.com/aomar/interactivespace/vid/Pg4-FULLSCENE(rq)_VP9.webm'></video>
</a-assets>
<a-marker preset='custom' type='pattern' url='https://kucdinteractive.com/aomar/interactivespace/img/pattern-veles.patt' vidhandler="target: #vid-1, #vid-2, #vid-pg4">
<a-plane width="1.78" height="1" rotation='270 0 0' src='#vid-1'></a-plane>
<a-video width="1.32" height="1" rotation='270 0 0' position='0 0.5 0' src='#vid-pg4'></a-video>
<a-video width="1.78" height="1" rotation='270 0 0' position='0 1 0' src='#vid-2'></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
(JS):
AFRAME.registerComponent('vidhandler', {
schema: {
target: {type: 'string'}
},
init: function() {
this.videoNodes = document.querySelectorAll(this.data.target)
},
tick: function() {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
for (let i = 0; i < this.videoNodes.length; i++) {
this.videoNodes[i].play();
}
}
} else {
if (this.toggle) {
for (let i = 0; i < this.videoNodes.length; i++) {
this.videoNodes[i].pause();
}
this.toggle = false;
}
}
}
});
Additional Info:
Mobile: Samsung s20
Mobile Browsers Tested: Samsung Internet, Chrome, Firefox (None
worked)
PC Browsers Tested: Chrome, Edge, Firefox (Worked)
Anyone have any workarounds on this bug?
Tested what Piotr Adam Milewski commented and it was a resolution issue. When I scaled the video to fit a 1080p ratio, it worked on both devices! Also the linked example he provided was really helpful at solving this!
I want to play video and audio in autoplay mode, When both are ready to play. I'm using this code.
var player;
player = new YT.Player('YouTubeVideoPlayer', {
videoId: 'ID', // YouTube Video ID
width: 560, // Player width (in px)
height: 316,
start:0, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 0, // Show pause/play buttons in player
showinfo: 0, // Show pause/play buttons in player
rel: 0, // Hide the video title
modestbranding: 0, // Hide the Youtube Logo
loop: 0, // Run the video in a loop
fs: 1, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 1 // Hide video controls when playing
},
events: {
onReady: function(e) {
e.target.setVolume(100);
}
}
});
}
This code is working fine in desktop browsers. But when I try it on mobile device it is not working.
I had already given up, until I found this page. It works on both Mobile and Chrome. The question is, how?
Page: https://neilpatel.com/br/master-class/?v=noredirect
I started using animsition today and everything looked simple at first. However, when I used it on my html code, the animsition wouldn't work and it kept on preloading.
Html body
<div class="panel1">
<div class="tex">text</div><div class="t">t</div>
<div class="animsition head">
<h2>Something</h2>
</div>
</div>
JS
$(".animsition").animsition({
inClass: 'fade-in-up',
outClass: 'fade-out-up',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
// e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
loading: true,
loadingParentElement: 'body', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
// "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
// The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
});
And the browser displays a preloader which never completes loading.
Found it!
Animsition doesn't work with the latest version of jquery(3.1.1). So beware, animsition users.
I am working on a HD button, so I have to reload the video and play it when it stops. So first, I am trying to load the HD file.
I've already read a lot of things about changing the source of the video tag. My code is working with FireFox and Internet Explorer, but not with Chrome :
vjs.HdToggle.prototype.onClick = function() {
var mp4Vid = document.getElementById('mp4Source');
var webmVid = document.getElementById('webmSource');
var oggVid = document.getElementById('oggSource');
this.player_.pause();
$(mp4Vid).attr('src', './test.mp4');
$(webmVid).attr('src', './test.webm');
$(oggVid).attr('src', './test.ogg');
this.player_.load();
this.player_.play();
}
I don't know what I have to do to make it work with Chrome. Does somebody have an idea ?
Thank you, Lea.
You should use src() to update the sources.
this.player_.src([
{ type: "video/mp4", src: "/test.mp4" },
{ type: "video/webm", src: "/video.webm" },
{ type: "video/ogg", src: "/test.ogv" }
]);
https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#src-source-
You might also find this existing plugin useful: https://github.com/vidcaster/video-js-resolutions
I've setup a PHP video browser on a website (check videos pod) when a video thumbnail is clicked a video should popup and play with the FancyBox script, but instead the video just does not load. Why is this?
You are using fancybox v2.x with options for fancybox v1.3.x (they are not compatible with each other.)
Your best bet is to get rid of this script :
<script type="text/javascript">
$(".videobox").click(function () {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
</script>
and try this instead :
<script type="text/javascript">
$(document).ready(function () {
$(".videobox").fancybox({
width: 680,
height: 495,
type: "iframe"
}); // fancybox
}); // ready
</script>
notice that we are using type : "iframe" because you are using youtube embed mode
SIDE NOTE: You are loading two versions of jQuery (1.7.1 and 1.7.2) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.