I added my bootstrap website for the video
but when I right click and tried to open new tab on this video, new tab option disabled, any solution to enable this option??
Thanks
here the code
<video autoplay="" target="_blank" class="header-index__video" loop="" muted="" playsinline=""
src="assets/video/Home.mp4" style="width:100%"></video>
I think there is no other choice but instead placing a thumbnail of the video, then wrap it with anchor tag with href value of the targeted video. It does exactly what you are expecting. Something like this:
<a href="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" target="_blank">
<img src="https://picsum.photos/200/300">
</a>
Related
I have this code that is just a funny troll video, but I don't know if you are able to make a video autoplay or if it needs to be manually clicked on by the user.
<div id="banner">
<h2><strong>Welcome To My Portfolio!</strong>
<br /> My Name is <span style="color: red">John</span>, and I am excited
to meet you!</h2>
<p>Does this statement make you want to click the big shiny button?</p>
<a href="https://youtu.be/eBGIQ7ZuuiU?t=1" target="_blank"
class="button large icon solid fa-check-circle">Yes it does</a>
</div>
I tried just adding an autoplay feature to the end of the tag, as well as trying it in other spots but I am just not quite sure.
<video autoplay>
<source src="https://youtu.be/eBGIQ7ZuuiU?t=1" type="video/mp4">
Your browser does not support the video tag.
</video>
I have this code inside
and I have the .css the class myvideo (It doesn't need this code ),it is the design.
What I want to know is ,how can I do pause and unpause this video.I try to stop my video and I didn't manage it.If you could help me with it I will be greatful.Thanks
<div class="myvideo" style="left: 6px; top: 0px">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="exr.mp4" type="video/mp4">
</video>
If you want to have control over a video element you must use JavaScript to control it. Here's a great example of how to control a video object from JavaScript: https://www.w3schools.com/tags/av_met_pause.asp
You may need to add another HTML element to control your video. This element must listen to a click event. After that, you will be able to do what you want with the video.
const videoEl = document.getElementById("video-bg-elem");
// Will play the video
videoEl.play();
// Will pause the video
videoEl.pause();
I need a thumbnail in my videogular2.
I want to create a thumbnail/poster for my video. Currently it only shows a play/pause button with black screen and vg-poster is not working.
Here is my code:
<vg-player>
<vg-overlay-play></vg-overlay-play><vg-controls vg-autohide="false">
<vg-play-pause></vg-play-pause>
<vg-mute></vg-mute>
</vg-controls><vg-poster vg-url="https://www.almanac.com/sites/default/files/styles/primary_image_in_article/public/image_nodes/sunflower-1627193_1920.jpg?itok=RUilemL3"></vg-poster>
<video height="200px" width="100%" [vgMedia]="media" #media src="{{server_path}}{{imgVid.data_path}}" id="singleVideo"
autoplay></video>
</vg-player>
The HTML 5 video tag has a poster attribute. From w3Schools:
specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
In your example it would look like this:
<video
poster="https://www.almanac.com/sites/default/files/styles/primary_image_in_article/public/image_nodes/sunflower-1627193_1920.jpg"
height="200px"
width="100%"
[vgMedia]="media"
#media
src="{{server_path}}{{imgVid.data_path}}"
id="singleVideo"
autoplay>
</video>
I'm trying to find a solution and way to toggle play & pause for multiple audio's for different onclick images.
Do you guys have any idea how to include pause by onclicking the image again.
I found a way for the onclick function to play the audio for the 2 different images, but I don't know how to make it pause by clicking on the image again.
Here is my fiddle
Thanks!!
<a nohref onclick="clicksound1.playclip()" style="cursor:pointer;" title="Facebook" target="_blank">
To do this you need to use javascript.
So in your HTML file you could do something like this:
In your HEAD section:
<script>
var yoursound = new Audio();
yoursound.src = "filename";
function PlaySound() { yoursound.play(); }
</script>
In your BODY section:
<audio id="yoursound"> </audio>
<button onclick="PlaySound()"> ... </button>
HTML:
<audio id="audio" src="sound.mp3" ></audio>
<button onClick="playAudio ('audio')">PLAY!</button>
JS:
function playAudio (var id) {
document.getElementById(id).play();
}
Add a html sound element:
<audio id="sound1">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button onclick="document.getElementById('sound1').play()">Button</button>
And add an onclick event to the button
Read this:
https://www.w3schools.com/tags/tag_audio.asp
https://www.w3schools.com/tags/ref_av_dom.asp
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
<a id="w00t" title="Facebook" target="_blank">
<img src="https://d2fi4ri5dhpqd1.cloudfront.net/public/resources/social-networks-icon-sets/circle-dark-gray/facebook.png" alt="Facebook" title="Facebook" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important"onclick="play()">
</a>
<audio id="audio" src="http://www.mashuptown.com/files/dj_morgoth_never_gonna_give_your_teen_spirit_up.mp3"type="audio/mp3"> ></audio>
Hey Guys,
Thank you very much for your answers! It helped me a step further and to find some solutions to solve my problem. As of now, I have the following code. This basically does what I want it to do and intent to do. Playing audio when you click on a picture rather than a button.
However, I'm not really satisfied that it doesn't show the finger icon when you hover over the Facebook icon. I tried to solve this with href, but I cant get it done without that it opens a new separate error tab/window with: {"error": "Please use POST request"}
Do you guys have any thoughts how to solve this? Thanks!
I am unable to add div and video tags inside joomla 2.5.7 articles as when i am adding the div but content is not showing on live.
<div class="rightside">
<div>
<video width="900" height="550">
<source src="http://eb5mg.com/video/1.mp4" type="video/mp4">
</source>
<source src="http://eb5mg.com/video/eb5.ogg" type="video/ogg">
</source>
</video>
</div>
</div>
Try the below code
<div class="rightside">
<div>
<video width="900" height="550">
<source src="http://eb5mg.com/video/1.mp4" type="video/mp4">
<source src="http://eb5mg.com/video/eb5.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
I see this is an old topic but I went though this same problem. It has everything to do with Joomla and for me it came from two separate sources.
First there is a html word filter which is part of the global configuration which on defualt uses a black list to strip out many tags. I set the publisher and super users Filter Type to No Filtering but depending on your users and security needs you might want to be more strict (say like expand on the black list and only allow super user to have no filter).
Then is the wyswyg editor you are using for your articles. It also may be text filtering your html, TinyMCE which was my defaut editor also has options for stripping out code which you can adjust but after playing with it for a while I changed my users profile text editor to none.
After that my video tags worked and I imagine your div tags will work too.