Please how I can play sound in specific positions...
Exemple : data-2000 and another data-5000
This is my code :
<div data-1000="" data-2000="">
<audio id="audio01" preload="auto"/>
<source src="audio1.ogg" type="audio/ogg">
<source src="audio1.mp3" type="audio/mpeg">
</audio>
</div>
<div data-2000="" data-3000="">
<audio id="audio02" preload="auto"/>
<source src="audio2.ogg" type="audio/ogg">
<source src="audio2.mp3" type="audio/mpeg">
</audio>
</div>
Example website use sound on specific data: http://www.cabletv.com/the-walking-dead
I use Skrollr JS
Thanks
Related
It just doesn't play.
This is the code for the player:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="https://www.reportercatolico.com.br/audios/1cd5d4f1448ae07340406213d5da61dc.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
What am I doing wrong?
I've got a really strange issue. Azure's media player was working just fine until a few days ago, when I actually needed it working, and since then it hasn't. I've attached a picture so you can see what I am looking at whenever I press play:
This is the code for the player:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" autoplay controls width="100%" margin="0" margin="0px" poster="{{object.thumbnail.url}}" data-setup='{"logo": { "enabled": false },"nativeControlsForTouch": false, "plugins": {"ga":{ "eventsToTrack": ["playerConfig", "loaded", "playTime", "percentsPlayed", "start", "end", "play", "pause", "error", "buffering", "fullscreen", "seek", "bitrate"], "debug": false}}}'>
<source
src="{{object.ingest_url}}"
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>
I am using version 2.2.4:
<link href="http://amp.azure.net/libs/amp/2.2.4/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src= "http://amp.azure.net/libs/amp/2.2.4/azuremediaplayer.min.js"></script>
My own fault, the Streaming Endpoint was shut down accidentally.
My blog posts have either a VIDEO or an IMAGE, never both.
VIDEO and IMAGE are both template-variables in MODx Evolution CMS.
Now ALWAYS, a DIV section (be it blank space/area) for an image will show and below that a DIV for a video. I want only the image to show provided I input a template-variable for an image, and then no blank space for the video DIV. Similarly, when I input a template variable for a video, then I do not want a blank area/space for the DIV image space to show.
DIV for image:
<div class="image">
<img src="[*image*]">
</div>
DIV for video:
<div class="well">
<video width="400" controls>
<source src="[*video*]" type="video/mp4">
<source src="[*video*]" type="video/ogv">
</video>
</div>
How to display the DIV when I input an IMAGE and thus not show any space for the VIDEO DIV? Or how to display the DIV when I input a VIDEO and thus not show any space for the IMAGE DIV? Some IF-THEN rule?
Problem solved by using the PHx extra and this code...
[+phx:if=`[*video*]`:ne=``:then=`<div class="well">
<video controls="" width="400">
<source src="[*video*]" type="video/mp4">
<source src="[*video*]" type="video/ogv">
</video></div>`+]
</div>
Is there a way to specify the poster or get the preview image of the video from the azure media player as mentioned on this page
http://amsplayer.azurewebsites.net/azuremediaplayer.html
Thanks for any help.
Use the "poster" attribute on the video tag.
For example:
<video id="azuremediaplayer" poster="~/Content/img/preview.png" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls width="640" height="480" data-setup='{"logo": { "enabled": false}, "nativeControlsForTouch": false}' tabindex="0">
<source src="{video_src}" 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>
If you don't specify a value for the poster attribute then the player will use the first frame of the source video as the poster.
I have an html <video> tag with .ogg, .mp4 and .webm type of videos. I've also edited the .htaccess with the appropriate AddFile types. My video is supposed to play in the background. In Chrome, IE and Opera works correctly but in Firefox not. Here is my code:
<div class = "bgvid">
<video autoplay loop preload = "metadata" poster="images/pathos-lounge-restaurant.jpg" id="bgvid">
<source src="media/Luxurios-Pathos-Sunset-Bar-Restaurant.mp4" type="video/mp4">
<source src="media/Luxurios-Pathos-Sunset-Bar-Restaurant.webm" type="video/webm">
<source src="media/Luxurios-Pathos-Sunset-Bar-Restaurant.ogv" type="video/ogg">
</video>
</div>
And here is my page: http://freebeachbar.gr/pathos/
Two things
You have class hidden for container and lounge
and you have overflow:hidden for media all
You might wan't to remove that