Can someone help me because I have been googling this for hours and I can't seem to make it work.
I want the audio to play automatically when the page loads.
<script type="text/javascript">
var so = new SWFObject("/Player.swf" + "?" + Math.random(), "content", "520", "300", "9", "#f7f8f3");
so.addParam('wmode', 'transparent');
so.addVariable('id', '**dynamic-code**');
so.addParam('autostart','true');
so.write('flash_player');
</script>
when he page loads this is the output:
<embed type="application/x-shockwave-flash" src="/Player.swf?0.31587677053175867" width="520" height="300" style="undefined" id="content" name="content" bgcolor="#f7f8f3" quality="high" wmode="transparent" autostart="true" flashvars="id=114128" vmode="transparent">
This is my first time to ask here.
Thanks.
SWFObject only triggers Flash Player's autoplay, which makes the SWF autoplay, not content loaded by the SWF. If you want to make the loaded audio auto-play, you'll need to address it via your SWF's ActionScript.
The audio player you're using might have some documentation about triggering autoplay via flashvars, I'd look it up.
please try
so.addParam('flashvars','&autostart=true&streamer=http://example.com/examplevideo.mp4');
Try
so.addVariable("autoplay","true");
Related
I am using tabs to display clear content, but one of them stopped downloading well since it is in the data-toggle tab. It is a Leaflet map.
Here is the code :
Navbar code :
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
<li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">Lorem ipsum</div>
<div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>
Script :
<div id="carteBenef"></div>
<script type="text/javascript">
$(document).ready(function () {
var map = new L.Map('carteBenef');
var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
cloudmadeAttrib = 'Data, imagery and map information provided by MapQuest, OpenStreetMap and contributors, CC-BY-SA';
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>)
map.addLayer(cloudmade).setView(iades, 15);
var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>);
var benef = new L.Marker(benefLocation);
map.addLayer(benef);
benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup();
});
</script>
The map was appearing well before I put it in the tab, does someone have an idea why it does not work now? Thank you =)
Welcome to SO!
If your Leaflet map suddenly works correctly after you resize your browser window, then you experience the classic "map container size not valid at map initialization": in order to work correctly, Leaflet reads the map container size when you initialize the map (L.map("mapContainerId")).
If your application hides that container (typically through CSS display: none;, or some framework tab / modal / whatever…) or later changes its dimensions, Leaflet will not be aware of the new size. Hence it will not render correctly. Typically, it downloads tiles only for the fraction of the container it thinks is shown. This can be a single tile in the top left corner in the case of a container that was entirely hidden at map initialization time.
This mistake often arises when embedding the map container in a "tab" or "modal" panel, possibly using popular frameworks (Bootstrap, Angular, Ionic, etc.).
Leaflet listens to browser window resize event, and reads again the container size when it happens. This explains why the map suddenly works on window resizing.
You can also manually trigger this update by calling map.invalidateSize() when the tab panel is displayed (e.g. add a listener on the tab button click), at least the first time the container is rendered with its correct dimensions.
As for implementing the tab button click listener, perform a new search on SO on that topic: you should have plenty resources available for that matter, for most of the popular frameworks.
First, thank you #ghybs for your good explanation on why the Leaflet maps are not shown properly in these cases.
For those who tried unsuccessfully the #ghybs's answer, you should try to resize your browser instead of calling a method of the map object :
window.dispatchEvent(new Event('resize'));
As #MarsAndBack said, this fix may cause issues on pan/animation/etc features that Leaflet's invalidateSize provides.
I have this problem because i used modal bootstarp. and it not solved anyway. i tried map.invalidateSize() and window.dispatchEvent(new Event('resize')); but not fixed.
finaly it fixed by this:
$('#map-modal').on('shown.bs.modal', function(event) {});
'shown.bs.modal' event means when modal is completely load and not any confuse on size, now inside that write your codes.
For those like me weren't able to solve the challenge with the precious #ghybs explanation (map.invalidateSize()) and were able to do it with #gangai-johann one, there's still a chance you may do it the right way. Put your invalidate instruction inside a setTimeout, as it may be too early to dispatch that instruction.
setTimeout(() => {
this.$refs.mymap.mapObject.invalidateSize()
}, 100)
Refer to https://stackoverflow.com/a/56364130/4537054 answer for detailed instructions.
I have an AngularJS app that presents some sequential videos and if I go to another URL (by using another HTML reference, href) the old controller stays active and both videos still playing. This happens for each new page with the same controller that I've openned, creating multiple video instances.
The controller receives a video SRC and sets it using ng-src.
EDIT
I am getting video element by ID:
var video = document.getElementById("video");
And setting correspondent source when controller is initialized:
if (video) {
video.src = Modernizr.video.ogg ? $scope.mainVideoUrlogv :
Modernizr.video.webm ? $scope.mainVideoUrlwebm :
$scope.mainVideoUrlmp;
$scope.playVideo();
}
HTML
<video id="video" ng-mouseup="pauseOrPlayVideo()">
<source ng-src="{{mainVideoUrlwebm}}" type="video/webm">
<source ng-src="{{mainVideoUrlogv}}" type="video/ogv">
<source ng-src="{{mainVideoUrlmp}}" type="video/mp4">
</video>
The solution was to remove the video Element from the page.
var video = document.getElementById("video");
Mozila documentation about ChildNode.remove() helped to perform remove action.
video.remove(); //javascript way
However, I've realized that it does not work on IE, as you can notice in the last reference.
The solution was to perform this action in jQuery.
$('video').remove(); //jQuery way
It works in the browsers that I have tested, namely Chrome, Firefox Dev Edition and IE9, IE10.
I am using angularjs and I read that videoangular is automatically responsive with vg-responsive='true'.
But using this code:
<videogular vg-responsive='true'>
<video class='videoPlayer' controls preload='none' vg-responsive='true'>
<source src='http://www.videogular.com/assets/videos/videogular.mp4' type='video/mp4'>
</video>
</videogular>
the video on the browser is not responsive.
Any idea?
Thank you.
Have you tried with a $scope variable like config.responsive instead of true directly?
I don't remember now, but maybe you can't set a value directly to vg-responsive.
UPDATE
You must specify a theme, this is a required parameter. This worked for me:
<videogular vg-theme="config.theme.url" vg-responsive="true">...</videogular>
You could take a look to the Videogular's reference for more info:
https://github.com/2fdevs/videogular/wiki/Videogular-reference
Does anybody know how to change Transition Duration for the Fotorama jquery Plugin?
(4.1.17 http://fotorama.io)
Thank you!
It is posible since 4.2.3.
Set animation length in milliseconds using data-transition-duration:
<div class="fotorama" data-transition-duration="1000">
</div>
To see the changes, click on the stage or navigation. This option does not affect the behavior of the swipe.
Fiddle: http://jsfiddle.net/artpolikarpov/jrCC5/embedded/result,html,js/
You can use following attributes in js section
transitionDuration: 333
You can find the more detail on this
jsffidle example.
I am trying to use a video player (the jwplayer) inside my AngularJS project. This post consists with 2 parts: part 1 for background, part 2 is my question. Thanks.
PART 1: Solving the "Error loading player: No playable sources found" problem.
At first the video is not showed, just a black rectangle on the page ui, and a quite misleading console message saying "No suitable players found and fallback enabled".
Hours later I happened to change the jwplayer size configuration from "height:450, width:800" to "height:'100%', width:'100%'". This time jwplayer shows a message on the page ui: "Error loading player: No playable sources found".
That gives me direction. My jwplayer usage looks like this:
<!-- this is my index.html -->
<div id="jw_container">Loading the player ...</div>
<script>
var player = jwplayer("jw_container").setup({
file:"{{model.my_video.video_url}}",
......
Change that file line to a hardcoded absolute video url will work, indicating that is the real problem. So eventually I got:
file: angular.element(document.getElementById('ng-wrapper')).scope().model.my_video.video_url,
and then problem solved, for now. (But still ugly, not intuitive, in my opinion.)
================================ SEPARATOR ===================
PART 2: My real question
Coming from the world of traditional template engines, one might tend to use {{...}} wherever he wants. But in AngularJS, situation is different.
Besides the above example, this is another example bit me before:
<img title="{{my_title}}" src='logo.png'> <!-- This works -->
<img src="{{my_image}}"> <!-- This doesn't. Use ng-src instead. -->
So in general, when and when not to use {{...}} inside the AngularJS view file?
Only for Part 1: If you're working with jwplayer and Angular then I highly recommend calling jwplayer from Angular as opposed to the other way round (what you're doing).
e.g.
myModule.controller('MyController', function ($scope, stuffINeed) {
jwplayer.key = "myKey";
jwplayer("myElement").setup({
file: "MyFileName"
});
As long as jwplayer.js has been loaded (link in index.html or use something like require.js) you're good to go!
Wrap the Jw Player as a Directive. You can use something like this: https://github.com/ds62987/angular-jwplayer
Trying to give my own thoughts on this topic.
Rule #1: Never write {{...}} inside AngularJS's <script>...</script> tag. Simply because AngularJS's template system doesn't work in thay way. Instead, use this:
//This is the usage in the view
angular.element(document.getElementById('the_id')).scope().foo
Alternatively, you can define an extra helper in view file:
//This is another usage in the view
function bar(foo) {
//do something with foo
}
and then use your model in a "usual" way via controller file:
//This is inside controller file
function YourCtrl($scope) {
bar($scope.foo);
}
That is it.
Yet I am still not sure when and when not to use {{...}} inside the html part of view. Leave this part to be answered by someone else. (I am now just a new AngularJS learner in week 2.)
Edit : I added test plunker : http://plnkr.co/edit/BMGN4A
Can you provide a full example? Because I write as below but get message Cannot read property 'videoUrl' of undefined although I have $scope.videodata.videoUrl = "bla bla"; in my controller.
<script type="text/javascript">
jwplayer("myElement").setup({
file: angular.element(document.getElementById('myElement')).scope().videodata.videoUrl,
image : "http://i3.ytimg.com/vi/2hLo6umnjcQ/mqdefault.jpg",
autostart : "false",
id : 'playerID',
width: '700px',
height: '400px',
primary : "flash",
stretching : "uniform",
modes : [{
type : 'html5'
}, {
type : 'download'
}, {
type : 'flash',
src : 'player.swf'
}]
});
</script>