So I have a chatting website with some friends and I'm trying to add a radio player widget to login page. But when I try adding the code and click save button, "iframe" and "document" gets removed automatically. I'm totally new to coding and stuff so I have no idea how to add a radio player widget without using inline frame. Here's the code I'm using. Please pardon my noobiness hehe.
<div class="radyoTelekomFooterDIV">
<div radyotelekom="radyoplayer-v6">
<script type="application/javascript" src="//radyoplayer.net/players/v6/player.js?v=0.6.0.0"
charset="UTF-8"></script>
</div>
</div>
<audio controls>
<source src="path-to-audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Above is an example of HTML5 audio player code, check if this help you.
Replace "path-to-audio-file.mp3" with the URL or path to the audio file you want to play.
HTML5 audio player does not require an iframe.
Related
I have a gaming website and I'm using this following audio element to automatically play a one-two seconds long audio in the background on certain pages after they are loaded:
<audio autoplay hidden>
<source src="gallery/Welcome.MP3" />
</audio>
It works, but only if I actually click on the menu to load the page. If I type the website/webpage in the browser, or use a direct link, it never plays. Can someone tell me why it is and how I can make it play in all cases?
Use <audio src="gallery/Welcome.MP3" autoplay></audio> OR
According to this answer. You can use:
<audio id="my_audio" src="gallery/Welcome.MP3"></audio>
<script>
window.onload = function() {
document.getElementById("my_audio").play();
}</script>
HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.
The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.
My code looks like this:
<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
// sources here
</video>
I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).
I've given a look as well, and it seems as many CSS and JavaScript solutions out there don't work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).
Now I came up with this idea, which as a purist I don't like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.
You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).
Hope this helps!
I know this was asked over one year ago but I wanted to share the solution for others.
What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.
const video = document.getElementById('video-input');
video.play();
Setting autoplay to false and controls to false did work for me:
<video
src='xxxx'
muted
className='landing__empty-video'
loop
playsInline
autoPlay={false}
controls={false}
preload='auto'
type='video/mp4'
/>
Bear in mind this was React, in html case it would be "false".
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
I want to have users be able to click a link to play audio on my website, but I don't want there to be an actual 'player', per se, on the page. Is there a way to make a link play an audio file? I do not want to go to an actual file. I simply want to play that audio in the "background" of the current page.
I have tried this:
<audio>
<source src="My Audio.wav" type="audio/wav">
</audio>
However, that doesn't even show anything at all. What do I need to do?
<audio id="player" src="My Audio.wav"></audio>
<div>
Play
</div>
By doing that, the href="#" will link to that exact same page, and when clicked, the onclick event will play the audio.
Just a note, it is not a bad idea to have a couple of different file formats. That will assist in cross-browser compatibilities.
I am using the <video> tag, and I want to use any URL from YouTube in it.
I have this http://jsfiddle.net/wCrNw/ but it's not working.
I have checked this Show Youtube video source into HTML5 video tag? but that is not solving my problem.
<video controls="controls"
class="video-stream"
x-webkit-airplay="allow"
data-youtube-id="N9oxmRT2YWw"
src="http://www.youtube.com/watch?v=OmxT8a9RWbE"
></video>
MediaElement YouTube API example
Wraps the YouTube API in an HTML5 Media API wrapper, so that it can be programmed against as if it was true HTML5 <video>.
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
<script>
var player = new MediaElementPlayer('#player1');
</script>
Video tag supports only video formats (like mp4 etc). Youtube does not expose its raw video files - it only exposes the unique id of the video. Since that id does not correspond to the actual file, video tag cannot be used.
If you do get hold of the actual source file using one of the youtube download sites or soft wares, you will be able to use the video tag. But even then, the url of the actual source will cease to work after a set time. So your video also will work only till then.
The most straight forward answer to this question is: You can't.
Youtube doesn't output their video's in the right format, thus they can't be embedded in a
<video/> element.
There are a few solutions posted using javascript, but don't trust on those, they all need a fallback, and won't work cross-browser.
This would be easy to do :
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Is just an example.
This will give you the answer you need. The easiest way to do it is with the youTube-provided methods. How to Embed Youtube Videos into HTML5 <video> Tag?
According to a YouTube blog post from June 2010, the "video" tag "does not currently meet all the needs of a website like YouTube" http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html
Try this solution for the perfectly working
new YouTubeToHtml5();
any idea how to carry out the following?
<video src="video1.ogv" id="ve1" controls>
Your browser does not support HTML5 video.
</video>
<video src="video1.ogv" id="ve2" controls>
Your browser does not support HTML5 video.
</video>
<button onclick="document.getElementById('ve1').play()">
Play</button>
I have two videos with id's 've1' and 've2' respectively. At the moment the code above for the button will enable play on 've1' when pressed! Any simple way of enabling play on both videos. I have tried altering the code within the button tag with no success as of yet.
You could simply change the onclick value to:
onclick="document.getElementById('ve1').play();document.getElementById('ve2').play();"
But it might be cleaner to move it into a separate JavaScript function which sets the play going and calls that:
onclick="playVideos"
And:
<script>
function playVideos() {
document.getElementById('ve1').play();
document.getElementById('ve2').play();
}
</script>