1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with changing HTML5 player code

Discussion in 'JavaScript' started by chrisj, Apr 29, 2015.

  1. #1
    In a php web script I'm using I have the video.js HTML5 video player working successfully in all browsers and successfully in IE8 - because of the flowplayer fallback code.

    However, I'm told that "Video.js has its own fallback(for dynamically loaded video)", but I can't figure out how to change this working code (with Flowplayer fallback) to the video.js fallback.
    Here's the currently working code:
    
    <video id="_1200k.mp4" class="video-js vjs-default-skin"
    preload="none" width="445" height="340" controls
    poster="[var.thumb_file]" data-setup='{techOrder: [‘flash’,’html5’}'>
    
    <source src="http://www...com/videos/[var.video_play]" type='video/mp4' />
    
    <object class="vjs-flash-fallback" width="445" height="340" type="application/x-shockwave-flash" data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
    <param name="movie" value="/flowplayer/flowplayer-3.2.16.swf" />
    <param name="flashvars" value='config={"playlist":["/[var.thumb_file]", {"url": "http://www....com/[var.video_play]","autoPlay":false,"autoBuffering":true}]}' />
    <img src="[var.thumb_file]" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
    </object>
    </video>
    Code (markup):
    Maybe just changing what's in the <object> tags, would do it? Any help will be appreciated. Here's some video.js info:https://github.com/videojs/video.js/.../docs/index.md
     
    chrisj, Apr 29, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Since you don't actually seem to be using video.js in creating the VIDEO tag, I'm not quite sure what you are expecting it to do... though the invalid ID, inclusion of the "controls" attribute meaning you shouldn't even need JS, garbage 'data-' attribute meaning whatever scripting is being used is rubbish, and that you went ahead and did the fallback properly WITHOUT the scripttardery... well...

    You're talking about video.js why exactly? Just strip that crap out and let VIDEO and OBJECT do OBJECT's job!

    Wait, did I say "do OBJECT's job!" ? Why yes, yes I did. Malfing HTML 5-tardery and it's pointless redundancies...
     
    deathshadow, Apr 29, 2015 IP
  3. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Thanks for your reply. I stripped out what I believe you were describing, like this:
    
    <video id="_1200k.mp4" class="video-js vjs-default-skin" preload="none" width="445" height="340" controls poster="[var.thumb_file]" >
    <source src="http://www...com/videos/[var.video_play]" type='video/mp4' />
    <object>
    </object>
    </video>
    Code (markup):
    still without success in playing the video in IE8. Any other help will be appreciated.
     
    chrisj, Apr 30, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Actually, looks more like you removed the part that would make it play in IE altogether.

    Try this, it tries to correct the stuff I was talking about and axe the pointless video.js nonsense:
    <!--
    	ID's should not contain periods,
    	and should start with letters, not underscores
    -->
    
    <video 
    	id="giveThisAValidId"
    	preload="none"
    	width="445" height="340"
    	controls
    	poster="[var.thumb_file]"
    >
    	<source
    		src="http://www...com/videos/[var.video_play]"
    		type="video/mp4"
    	>
    	
    <!--[if IE ]> 
    	<object 
    		type="application/x-shockwave-flash" 
    		classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
    		width="450" height="225" 
    	> 
    <![endif]--> 
    <!--[if !IE]>--> 
    	<object 
    		type="application/x-shockwave-flash" 
    		data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 
    		width="445" height="340"
    	> 
    <!--<![endif]--> 
    	
    		<param
    			name="movie"
    			value="https://releases.flowplayer.org/swf/flowplayer/flowplayer-3.2.16.swf"
    		>
    		<param
    			name="flashvars"
    			value="config={'playlist':['/[var.thumb_file]', {'url': 'http://www....com/[var.video_play]','autoPlay':false,'autoBuffering':true}]}"
    		>
    		<img
    			src="[var.thumb_file]"
    			width="640" height="264"
    			alt="Poster Image"
    		>
    		
    	</object>
    </video>
    Code (markup):
    IF your bracketed values are being plugged in properly and all the paths are working, AND the flash plugin is present, this should work all the way back to IE 5.5 and 5.2 Mac.

    Though I'd also suggest you get your other two file formats (ogg and webm) into SOURCE tags there as well. Remember you want to use the train wreck of redundancy known as HTML 5's VIDEO tag, you can't assume MP4 is gonna work.

    Also, what codecs are you using in that MP4, are you sure they are flowplayer/flash supported? Remember flash sometimes chokes on AAC audio. (usually it's not that it isn't supported so much as their implementation is unstable!).

    Remember, .webm, .mkv, .mp4, .mtk, .ogg -- they're all just container file formats and not the actual encoding.
     
    deathshadow, Apr 30, 2015 IP
  5. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    Thanks for your reply. Much appreciated. My original code worked with Flowplayer successfully in IE8. Since I already have video.js installed, and they claim to have a fallback, my goal here was to get this to work in IE8 without Flowplayer, just using video.js.
    It appears that your code example includes flowplayer. I'm looking to get help with how to change my working code from Flowplayer fallback to the video.js fallback. Why is video.js "pointless"? I look forward to any additional comments/insight. Much thanks again.
     
    chrisj, Apr 30, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    If you 'need' 115k of minified javascript and 16k of minified CSS to style or customize a HTML 5 video player, you are doing something horribly and disastrously wrong. Seriously, it's such a fat bloated train wreck of how NOT to do things, I'm shocked anyone would actually put it on a website. Admittedly, I say the same thing about bootcrap and jqueery.

    BY ITSELF MINIFIED it is larger than most of the pages I'd put on a website WITHOUT minification in terms of HTML, CSS and scripting!

    Which is why I'd be swinging a giant axe at it and letting the HTML elements do their job. It's a STUNNING example of what I'm always ranting about when it comes to "JS for nothing and your scripts for free. That ain't workin', that's not how you do it. Lemme tell ya, these guys ARE dumb."
     
    deathshadow, Apr 30, 2015 IP
  7. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #7
    After reading that reply, I thought I'd try mediaelement.js and it works successfully in all browsers, even IE8, except the poster image does not appear in IE8. Any help with getting the poster image to appear in IE8, will be appreciated. Here's the code:
    
    <video id="video" poster="http://www.-domain-.com/img/testImage.jpg" preload="none" controls="controls" width="240" height="220" >
    <source type="video/mp4" src="http://www.-domain-.com/video/testVideo.mp4"/>
    <object width="240" height="220" type="application/x-shockwave-flash" data="http://www.-domain-.com/mediaelement/flashmediaelement.swf">
      <param name="movie" value="http://www.-domain-.com/mediaelement/flashmediaelement.swf" />
      <param name="flashvars" value="controls=true&file=http://www.-domain-.com/video/testVideo.mp4" />
       <!-- Image as a last resort -->
       <img src="http://www.-domain-.com/img/testImage.jpg" width="240" height="220" title="No video playback capabilities" />
       </object>
       </video>
    Code (markup):
     
    chrisj, May 1, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    "poster" is a HTML 5 concept, unless your flash based player has it's own version of doing posters (I've never seen one that did) you won't have support for it.

    Remember, IE8 and earlier has NO support for the VIDEO tag, so it's dropping through to the flash version, and the flash version just doesn't do that.

    You COULD maybe fake it with scripting, but really if you're going to do that I'd suggest doing it yourself instead of trying to use an off the shelf answer as generally speaking they're all pointless redundancies and doing things that either aren't worth the bandwidth, aren't worth the development time, or aren't worth worrying about on decade old decade and a half out of date browsers.

    Though making that decision usually comes down to weighing the cost of implementation against what not doing it will actually cost you in terms of usability and functionality. For me, "Oh noes, a browser NOBODY should still be using in 2008 doesn't get the poster" is... well... Same reason I go "Oh noes, IE8 doesn't get rounded corners, gradients and shadows, nots thatz!!!"

    ... and why it's laughably pathetic that some people will throw scripting at websites to try and force such minor affectations to appear.
     
    deathshadow, May 1, 2015 IP
  9. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #9
    Thank you for your reply. However, I'm still interested in getting some help from someone with a work-around for getting a thumbnail to appear in IE8, as a substitute for the poster image. Any additional help will be appreciated.
     
    chrisj, May 5, 2015 IP