Flash object not autoplaying (tumblr) - html

I have a flash object I need to embed on my tumblr blog (Billy's audio player) and the embed works fine, except that I need to click a white play button before the object works:
(this is in Chrome; there is a similar play button on Edge)
However, other websites don't have this play button over the widget, including the widget's own webpage and the bottom left of this blog.
This is the embed code, taken directly from the Billy's audio player webpage (with added newlines for readability):
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1"
quality="high" wmode="transparent" width="200" height="10" name="billy"
align="middle" type="application/x-shockwave-flash" title="Adobe Flash Player">
Is there something I can add to make the flash object run automatically? I doubt it's a browser issue, as it works on some other webpages, and other viewers also see the white play button.

However, other websites don't have this play button... including the
widget's own webpage.
SWF and HTML must be in the same exact location (ie: web folder).
If SWF url is : http://www.sheepproductions.com/billy/billy.swf
then HTML must be : http://www.sheepproductions.com/billy/pageWithSWFembeded.html
This issue is caused by the small width/height of your SWF. Browsers assume it is a Flash advert banner and do not auto-load it. It can be fixed by either increasing SWF display size or by putting the small SWF in same location as HTML page that loads the SWF.
Also consider using HTML5 audio tag to guarantee playback of website audio even on mobile devices (they don't run Flash content within default browsers).

Related

My video is not playing in both Brave browser nor Firefox

I am new to HTML and CSS (So that may be the issue). I entered the following code into my html doc:
<video controls width="700">
<source src="video/PristineCustomCleansVideo.mp4" type="video/mp4">
</video>
The video I want to play is inside a folder called video. The index.html and the video folder are nested inside a folder together.
The video shows up on the site I'm making as a gray rectangle with controls (in a Brave browser). When I press play nothing happens. I also tried opening my page in Firefox and within the gray rectangle it says "No video with supported format and MIME type found."
I looked up this question and have found so many confusing suggestions. Whatever you recommend, please do it as if I know very little about computers (I thought I knew a good amount until reading some of the responses and can't follow what I should do. lol)
Another issue I am considering is if I have to do a lot of work to get the video to play, will others that I send my website URL to have issues as well? This is for a class project. I have to put everything on the school's server and share the URL with the teacher.
If your index page and the video are located in exactly the same place you do not need the video folder in the path to your file. The following should work.
source src="PristineCustomCleansVideo.mp4" type="video/mp4"

How to fix embed code to display video cleanly/properly?

I am trying to embed a video onto my website but having difficulties with the standard embed code.
Here is a link to my webpage:
https://southhemitv.com/2019/07/08/test-jul-9-2019/
The standard embed code displays a very small video player with large black borders. Adding height="500" improves the size but then some extra features are added such as the chinese text at above the video.
I would like to hide this extra text so viewers only see the video and the player controls. (Edit) It has been suggested i store the video on my own server but i am not able to download certain videos and because its expensive most websites embed videos rather than store them on their server
If anyone could help it would be very appreciated.
The original embed code:
~<iframe src="//player.bilibili.com/player.html?aid=13125324&cid=21539921&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>~
Link to original video:
https://www.bilibili.com/video/av13125324/
Many thanks
Download the video, then serve it from your own server or via CDN, use a videoplayer that you like and supports your video filetype.
The apparent issue here is the player's graphical interface.
Since you fetch the video from a website, it uses that website's video player (I think?).
In any case, just manually download the video & use the video player of your choice.

SWF on website header

I have an SWF on the header section of our site. It's embedded with Kimili Wordpress Plugin:
<div class="swfheader">
<?php echo do_shortcode('[kml_flashembed publishmethod="static" fversion="8.0.0" movie="http://xxx/uploads/2016/Assets/header.swf" width="1950" height="270" targetclass="flashmovie" play="true" loop="true" menu="false" quality="best" scale="noscale" allowfullscreen="false" allowscriptaccess="never" allownetworking="none"]'); ?>
</div>
Problem I'm having is auto play. In most browsers a "play" icon shows up for the swf to start and in other browsers everything works fine.
I used Adobe Animate CC to create it and publish settings under HTML Wrapper has only the loop option checked.
Is there any way to fix this issue? I'd like to have SWF auto play in all browsers if possible.
Your banner size is triggering the browsers assumption that it's some external advert banner (those need to be "click to play" in case of some noisy data hogging video advert that no-one asked for). To avoid it, the html & swf must be in same exact location:
Example :
mysite.com/post1/page.html and mysite.com/post1/banner.swf.
I don't know how you will meet that expectation via Wordpress since your posts .html file & your uploads folder content exist in two separate locations.

Why is an HTML video tag displaying the video upside down only in Mozilla Firefox?

I have a page that displays multiple videos using html video tags. The code looks like the below snippet:
<video controls="controls" class="vw" name="Video" src="videos/ACS_Video_2b.mp4"></video>
The class is simply a class that dynamically sets the width, height, etc.
The video looks and plays very nicely in all browsers except for Firefox. All of the videos on the website using these tags are upside down in Firefox. I can't seem to find anything online about people having similar problems. In fact, when I go to other websites using identical video tags and video extensions, etc., the video displays perfectly on their site for me in Firefox.
Here is the website with the upside down videos for reference:
http://www.larrykrannich.com/video.html
The videos display upside down locally, on a local server, and hosted on a real server.
Any help would be greatly appreciated.
This is a firefox problem, I have seen that several people have complained over and over about this problem but all to no avail. it only happens when the video is recorded from mobile, firefox doesn't seem to use the camera details to encoded rotation that came along with the mobile video. for the main time you have to figure out a fix for yourself, you can use css transform to rotate the video tag, but one problem with that is that it will rotate the video control with it.
you can use videojs, then add the rotate plugin, you can just google it. it will help rotate for video.
you can do something like this
if ( isfirefox ) {
<video class="video-js vjs-default-skin" controls preload="auto" width="270" height="360" data-setup='{ "plugins": { "zoomoomrotate": { "rotate": "270", "zoom": "1.4" } } }'>
<source src="video-source" type="video/mp4">
</video>
}
also, there is a recent issue in chrome update that compress mobile video as well. still looking for a fix for it
It seems to have something to do with rotation metadata in the video files. The problem can be solved by transcoding and rotating the video. Similar post here
Most likely, you have recorded the video upside down, without realizing it - which can happen, e.g. when using a smartphone-camera.
There are video-players, that auto-correct for such things, which might be, why you didn't realize the video being upside-down.
There is a free Videoplayer called VLC, which you can correct this with by rotating the video.
Get it here and install it, if you don't already have it:
http://www.videolan.org/vlc/
Steps:
Open video in VLC media player
Pause the video, if it's too short to keep running, while you perform the other steps
In the upper menu, navigate as follows:
Tools
Video Effects
In the window, that just opened go to the Geometry-tab and do the following:
Check the box "Transform"
Select "Rotate by 180 degrees"
Your video should now look nice and right side up
To save your changes:
In the upper menu click, navigate as follows:
Media
Convert/Save
Choose, where you want to save the file.
Upload the rotated video in place of the upside-down one.
Now your video should be displayed correctly :)

z-index and iFrames!

I'm using the FancyBox plugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page.
On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the embedded YouTube video still lays over the FancyBox image. I did a bit of z-index experimenting and still no luck.
Does an iFrame have seniority over all elements in a page even with z-index set, etc.?
Add wmode=transparent as param.
Html solution
<iframe title="YouTube video player"
width="480" height="390"
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0"
>
jQuery solution:
$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix
In a word, yes. However Youtube videos are Flash. Flash also has seniority over the Z-order. It will overlay whether it is in an IFRAME or not.
IFRAME and Flash are "heavyweight" objects. They have their own Window Manager objects (HWND in Windows), so they are either in front of other heavyweight objects or behind them.
div, span, etc are "lightweight". That is they are drawn objects, drawn onto the Body (which is a heavyweight object), and managed by the browser, not the window manager.
As far as the operating system window manager is concerned, they are just pretty pictures drawn by the browser. That's why they cannot overlay "real" objects (or what the window manager thinks of as real).
They have to be lightweight because they would rapidly exhaust the window manager if every DIV and SPAN and A had to reserve OS resources.
If you want the Flash applet to be rendered according to the same z-index rules of any other HTML element, then you need to set the WMODE attribute for the included flash.
See:
http://www.communitymx.com/content/article.cfm?cid=E5141
differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage
Is very simple, just add this parameters to your iframe url and thats it:
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
Good luck!
Hmm, the problem here is that I don't have control over the flash elements. I'm basically just pulling the embedded iFrame HTML from the youtube site which only contains the tags. So I can't set the WMODE attribute.
Late answer but: yes you can. Just tack ?wmode=opaque onto the yt url.
<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
To get this to work in IE (at least 7 and 8) you must add this:
<param name="wmode" value="transparent" />
I don't believe there is a way to append this to the iframe URL so your content needs to have this, probably between object tags.