Friday, February 21, 2014

How to replay a swf movie on jquery button click

1. Embedded flash movie

<object data="http://wwwimages.adobe.com/www.adobe.com/multimedia/en_us/get/flash/flash_installed_728x170.swf" type="application/x-shockwave-flash" id="flash_99674493" width="680" height="316">
    <param name="movie" value="http://wwwimages.adobe.com/www.adobe.com/multimedia/en_us/get/flash/flash_installed_728x170.swf">
    <param name="wmode" value="opaque">
</object>

<a href="javascript:restart();">Restart swf</a>

2. jQuery

var restart = function() { 

   var flashObject = jQuery("object");
   var flashOriginal = flashObject.html();
   var flashSrc = flashObject.attr('data');

   flashObject.find('param').remove(); 
   flashObject.attr('data',flashSrc);       
   flashObject.html(flashOriginal); 

}

Working Demo

How to build a HTML 5 video playlist

1. HTML
<video id="videoarea" controls="controls" poster="http://html5videoformatconverter.com/data/images/screen.jpg" src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video>

<ul id="playlist">
    <li data-url="http://html5videoformatconverter.com/data/images/happyfit2.mp4" data-poster="http://html5videoformatconverter.com/data/images/screen.jpg">Happy Fit</li>
    <li data-url="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4">Sintel</li>          
    <li data-url="http://html5example.net/static/video/html5_Video_VP8.webm">Resident Evil</li>      
    <li data-url="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</li>
</ul>

2. CSS

<style type='text/css'>
    #playlist {
        margin:0;
        padding:0;
        list-style:none;
        float:left;
    }
    #playlist li {
        cursor:pointer;
        background:#ffffff;
        border-bottom: 1px solid #C9C9C9;
        padding: 13px 8px;
    }
    #playlist li:nth-child(odd) {
        background-color: #F8F8F8;
    }

    #playlist li:hover{
        color:blue;                        
    }
    #videoarea {
        
        float:left;
        width:640px;
        height:480px;
        margin:10px;    
        border:1px solid silver;
    }
  </style>


3. jQuery
<script type='text/javascript'>
$(window).load(function(){
    $(function() {
        $("#playlist li").on("click", function() {
            $("#videoarea").attr({
                "src": $(this).attr("data-url"),
                "poster": "",
                "autoplay": "autoplay"
            })
        })
      
    })
});

</script>

Working Demo

HTML5 video loop src change on end play function

1. HTML


<video id="homevideo" width="100%" autoplay onended="run()">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<ul>
    <li>http://www.w3schools.com/html/mov_bbb.mp4</li>
    <li>http://www.w3schools.com/html/movie.mp4</li>
</ul>


2. CSS

<style type='text/css'>

    ul {

        display:none;

    }

  </style>


3. jQuery

<script type="text/javascript">

video_count = 0;

videoPlayer = document.getElementById("homevideo");



function run(){

   video_count++;

    var countVideo = $('li').length;

    

    if (video_count == countVideo) video_count = 0;    

    var nextVideo = $('li').eq(video_count).text();

    

    videoPlayer.src = nextVideo;

    videoPlayer.play();

        

};

</script>


Working Demo