Tumblr has an option to upload one audio file as a post but I'm looking to make an embedded playlist of multiple tracks. I'm trying to use JW Player ( http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5 ) to do it but so far no success.
Here is the code I'm inserting into the Head of my tumblr Theme:
<script type="text/javascript" src="http://216.172.180.215/~hello/music/jwplayer/jwplayer.js"></script>
And here is the code I'm inserting directly into a Tumblr post:
<div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "http://216.172.180.215/~hello/music/jwplayer/player.swf", file: "http://216.172.180.215/~hello/music/jwplayer/video.mp4", height: 270, width: 480 }); </script>
This is how the JW Player Guide explains it should work, but since it's not I'm assuming that the Tumblr source code is doing something to prevent it from working. Any insights as to what I'm doing wrong here?
The code below worked for me:
<div id='container'></div>
<script type="text/javascript">
jwplayer('container').setup({
'flashplayer': 'http://216.172.180.215/~hello/music/jwplayer/player.swf',
'file': 'http://216.172.180.215/~hello/music/jwplayer/video.mp4',
'height': '270',
'width': '480'
});
</script>
Related
I am trying to create a web app using recently launched flutter_web, but facing issues in playing a video inside my app. Can someone guide me how to play a video in flutter_web.
I tried to create a web plugin for flutter web, but as the official docs of flutter_web we can't create a plugin for web.
I tried to add a video and iframe tag in index.html but no luck.
I tried to use VideoElement provided by dart:html but not sure how to use it.
prefix1.VideoElement element = prefix1.VideoElement();
element.height = 200;
element.width = 200;
element.appendHtml("""<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
""");
element.querySelector('#video');
element.play();
You can now just use the official video_player_web plugin by adding it to your pubspec.yaml:
video_player: ^0.10.4+1
video_player_web: ^0.1.0
Then you can follow the video player cookbook or use the chewie plugin to get a nice UI.
I have managed to play the video automatically and play with the sound.
I need to be able to interact with the video, such as pause, stop or play.
I hope it helps you, greetings.
DART
import 'package:flutter_web_ui/ui.dart' as ui;
import 'dart:html';
main() async {
await ui.webOnlyInitializePlatform();
VideoElement videoElement;
videoElement = querySelector('#video');
videoElement.src = "https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4";
videoElement.muted = false;
await videoElement.play();
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script defer src="reproductor.dart.js" type="application/javascript"></script>
</head>
<body>
<video id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay muted></video>
</body>
</html>
I was struggling with the same issue until I ran the html_platform_view example from the flutter web repo.
Try this:
void main() {
ui.platformViewRegistry.registerViewFactory(
'hello-world-html',
(int viewId) => IFrameElement()..src = 'https://www.youtube.com/embed/tgbNymZ7vqY'
);
runApp(Directionality(
textDirection: TextDirection.ltr,
child: HtmlView(viewType: 'hello-world-html'),
));
}
I have run into a dead end trying to get the following HTML to work. I am trying to use the real time gauge chart to display a value coming from a photon. This is the snippet code from the pubnub site.
(I have proven that the published value is arriving in the Javascript using the commented out pubnub code in the Javascript. The value is displayed in the P tag.)
The P tag is displayed on the screen, but no gauge is displayed.
Could you please have a look at my code and guide me on where I have made a mistake. I have not worked with EON before, so I may be making very basic mistake.
<!DOCTYPE html>
<html>
<!-- <script type="text/javascript" src="http://cdn.pubnub.com/pubnub-3.16.1.min.js"></script> -->
<script type="text/javascript" src="//pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<div id="chart"></div>
<script type="text/javascript">
*var pubnub = PUBNUB.init({subscribe_key: 'xxxxxxx'});
/*
pubnub.subscribe ({channel : "datatest", message : function(tempmsg)
{document.getElementById("x").innerHTML = tempmsg.eon.data;}});
*/
var channel 'datatest';
eon.chart({
channel: channel,
generate: {
bindto: '#chart',
data: {
type: 'gauge',
},
gauge: {
min: 0,
max: 100
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'],
threshold: {
values: [30, 60, 90]
}
}
}
});
</script>
<body>
<p id ="x"> This is my text that will be replaced by the value from the photon </p>
</body>
</html>
The output from the photon looks like this:
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
There is a missing line of code in the PubNub EON JavaScript embed code for the Gauge Chart.
You must add pubnub: pubnub, to bind the graph instance to the PubNub stream.
I'm trying to do a simple POC using the Azure Media Player in my application using Alternative Setup for dynamically loaded HTML using JavaScript from this blog post. I'm getting an error when trying to load via javascript as described below.
If I simply include the javascript files and follow the example "Step 2: Add the HTML video tag to your page" it works:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
But I try to load it dynamically via javascript as described in "Alternative Setup for dynamically loaded HTML using JavaScript" I get an error
Uncaught Error: Error: TypeError: URL.createObjectURL is not a function azuremediaplayer.min.js:2
What I'm trying:
To keep it real simple I'm just trying to get it to load a video in response to a button click.
I have this code in place which is just a direct copy of the example provided.
HTML:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered">
</video>
<button id="amsbutton" type="button">Load</button>
Javascript:
$("#amsbutton").on("click", function () {
AMSVideo();
});
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
I tried your code with one minor tweak to not use jQuery and it seems to work fine. Also, if you are ever having trouble, please check out our samples page which has several working examples of loading Azure Media Player using the <video> tag method or dynamically loading using JavaScript
in the <head> of the HTML page, add the Azure Media Player scripts:
<script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!-- Set the location of the fallback techs -->
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap"
</script>
In the <body> of the HTML Page:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<button id="amsbutton" type="button" onclick="AMSVideo()">Load</button>
JavaScript:
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
If you are still having difficulty, please reach out to ampinfo#microsoft.com for more assistance.
I never found out exactly what the conflict was, but this turned out to be an incompatibility with CKEDITOR 4.3.1. When I commented out my ckeditor code:
CKEDITOR.replace('text-content', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
});
the problem went away. Fortunately, whatever it was is addressed in later version of ckeditor. I dropped in ckeditor from their cdn //cdn.ckeditor.com/4.4.7/standard/ckeditor.js" and the problem seems to be gone. Since this points to the "standard" version of ckeditor, I will update this if it turns out to be more specific like a particular ckeditor plugin for instance.
In my HTML page I have 9 images for dialing numbers and one text box that shows the pressed numbers. I want each of those images to immediately play beep sound when users click on them. I tried to use embed with hidden property and navigate it's source to .wav sound.
It is working OK, but when I press the images one after another immediately, it cannot play sound and just bees once at the end.
Is there any faster way of playing a .wav sound on 'onclick' method?
If you only need to support recent browsers, then HTML 5 offers you the Audio object
to load/buffer your sound:
var snd = new Audio("file.wav");
to play the sound:
snd.play();
to re-cue it to the beginning (so that you can play it again):
snd.currentTime=0;
This answer https://stackoverflow.com/a/7620930/1459653 by #klaustopher (https://stackoverflow.com/users/767272/klaustopher) helped me. He wrote:
HTML5 has the new <audio>-Tag that can be used to play sound. It
even has a pretty simple JavaScript Interface:
<audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">Play
it</button>
Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers).
<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>
You can use embed element for play sounds, but you've to check the formats supported by the different browsers.
Embed element on MDN
<a onclick="playSound('1.mp3')">
<img src="1.gif">
</a>
<div id="sound"></div>
<script>
var playSound = function (soundFile) {
$("#sound").html("<embed src=\"" + soundFile + "\" hidden=\"true\" autostart=\"true\" />");
}
</script>
This code lets you put in a picture button; when click you get a sound. It works with Google Chrome and Microsoft Edge but I can't get it to work in Internet Explorer. I'm using html 5 codes; please copy and paste and add you own samples.
</head>
<body>
<script>
var audio = new Audio("/Sample.wav ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="file://C:/Sample.jpg" onclick="audio.play ( )">
</body>
</html>
more on codes look at
http://html5doctor.com/html5-audio-the-state-of-play/
Example based on accepted answer (Tested in Chrome 70), but I didn't need to re-cue:
<button onclick="snd.play()"> Click Me </button>
<script>
var snd = new Audio("/Content/mysound.wav");
</script>
This is what I would do to play sound effects:
<html>
<body>
<audio id="sfx"><source src="mysound.mp3"></audio>
<button onclick="playsound()" id="button">Play a sound!</button>
<script> function playsound() {
var sfx = document.getElementById("sfx");
sfx.autoplay = 'true';
sfx.load();}
Or you can run this snippet:
function playsound() {
var mysound = document.getElementById("mysound");
mysound.autoplay = 'true';
mysound.load();
}
button {
color: blue;
border-radius: 24px;
border: 5px solid red;
}
body {
background-color: #bfbfbf;
}
<html>
<body>
<audio id='mysound'><source src="click.mp3"><!-- "click.mp3" isn't a sound effect uploaded to the snippet, because I don't think you can upload sfx to snippets. (I'm new to stackoverflow, so there might be a way) But if you actually use a sound effect in that folder that you're using, it works. --></audio>
<button id='btn' onclick='playsound()'>Play a sound!</button>
</body>
</html>
I have a google site. I want to use an external script to make google visualisations work on my site:
This is the piece of script that goes wrong.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I added this script trhoug a htmlbox and i get the error:
1+13 - 42: failed to load external url jsapi
Why won't itthe jsapi load?
As far as I know, you can't load external site/page (even google pages) within HTML Box gadget.To do so, you can create a custom gadget in Google Gadget Editor(using your gmail account),by visiting the following URL,
http://www.google.com/ig/ifr?url=gge.xml
and you can put the above code there and save it,you will get url by right click and copy link in the right side file name.Then, in your google sites page,
Edit Page --> Insert --> More Gadgets --> Add Gadgets By URL --> Paste the URL copied above and save.