logo
down
shadow

Load video after clicking a button or link inside div and stack the trigger, poster image, and video


Load video after clicking a button or link inside div and stack the trigger, poster image, and video

By : user2954605
Date : November 22 2020, 10:31 AM


Share : facebook icon twitter icon
How to fill video element with poster image even if the poster image is a different aspect ratio than its video element?

How to fill video element with poster image even if the poster image is a different aspect ratio than its video element?


By : Timo
Date : March 29 2020, 07:55 AM
hop of those help? This question got me thinking and your jsfiddle was useful in solving this (albeit not for IE as it doesn't implement the poster image correctly).
Basically combine what you posted, set the required poster image as the background image of the video element and specify a 2x2 transparent image as the actual poster image.
code :
<video controls poster="transparent.png"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>
video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}
HTML5 video not returning to poster image using .load()

HTML5 video not returning to poster image using .load()


By : user3371915
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Try to bind the fullscreenchange event on document or window instead of
onscroll load video at first with poster video.js

onscroll load video at first with poster video.js


By : Attract
Date : March 29 2020, 07:55 AM
this will help Please find this JsFiddle which has the behaviours you appear to require.
The function below was added to pause the video when any scrolling occurs.
code :
jQuery(document).scroll(function () {
    jQuery(".video-js")[0].player.pause();
});
setTimeout(function () {
    jQuery(".video-js")[0].player.play();
}, 3000);
jQuery(document).scroll(function () {
var time = jQuery(".video-js")[0].player.currentTime();     
    jQuery(".video-js")[0].player.pause().currentTime(time).trigger('loadstart');
});
jQuery(".video-js")[0].player.pause().currentTime(0).trigger('loadstart');
How to make a html5 video poster image transparent to see the background image while video is not playing

How to make a html5 video poster image transparent to see the background image while video is not playing


By : Juan Felipe
Date : March 29 2020, 07:55 AM
hop of those help? I am looking for a solution to get a transparent poster image for html5 video. , My solution looks like the following:
code :
<!-- generate an extra button to start the video -->    
<button id="button_teaser" onclick="playPause()">Play</button>

<video class="js-player" poster="poster.jpg" controls playsinline preload="none" id="video_teaser" data-plyr-config='{"volume": 0.3, "resetOnEnd": true, "enabled": true, "storage": { "enabled": false }, "quality": { "default": 720 } }'>
    <source src="video_360p.mp4" type="video/mp4" size="360">   
    <source src="video_720p.mp4" type="video/mp4" size="720">
    <source src="video_1080p.mp4" type="video/mp4" size="1080">
</video>

<!-- hide video -->
<script>
    $('#video_teaser').hide();
</script>

<!-- after clicking the generated play button, hide play button and show video -->
<script>
$(document).ready(function(){
    $('#button_teaser').click(function(){
        $('#video_teaser').show();
        $('#button_teaser').hide();
        $('#video_teaser').get(0).play();
    });
});
</script>

<!-- after playing video automatically hide video and show play button again -->
<script>
$(document).ready(function(){
    $('#video_teaser').on('ended',function(){
    $('#video_teaser').hide();
    $('#button_teaser').show();
    });
});
</script>
react-native-video: how to load next video on clicking a button?

react-native-video: how to load next video on clicking a button?


By : Orefa
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further One way to trigger a re-render when you need it is to put video index variable into the state of your component and update it on click.
Here's some code of yours with modifications and comments:
code :
constructor(props) {
    super(props);

    //Video properties
    this.state = {
        repeat: false,
        paused: false,
        currentVideo: 0, // <-- moved it to state
    };

    this.nextVideo = this.nextVideo.bind(this); //<-- bind method, since we're accessing this
 }

  nextVideo() { 
    //Skip video when button is pressed to next video in list
    if (this.state.currentVideo != VIDEOS.length-1)
    {
        this.setState({currentVideo: this.state.currentVideo + 1}); //<-- use setState instead of assignment to update
    }
    else
    {
        this.setState({currentVideo: 0}); //<-- use setState instead of assignment to update
    }
   }

 render() {
    return (
        <View style={styles.container}>
          <View style={styles.video}>
           <Video 
            source={{uri: VIDEOS[this.state.currentVideo]}}
            ref={(ref) => {this._player = ref}}
            style={styles.video}
           />    
          </View>
          <View style={styles.button}>
            <Button
              onPress={this.nextVideo}
            />
          </View>
        </View>
  );
Related Posts Related Posts :
  • RouterLink is not working properly dynamically in angular 6
  • Simple HTML rendering issue
  • Best Approach to separate Form sections
  • How to Organize Phonegap HTML Files
  • Wrap a long single word using CSS
  • I am trying to implement a hover effect using CSS3 Transitions
  • How can I avoid hard coding line height while vertically centering element in a div?
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org