small medium large xlarge

Back to: All Forums  HTML5 and CSS3
12 Jun 2017, 01:57
Nicole Lin (1 post)

Hello all,

I am a newbie to website design and am trying to create a new website with a full screen background video and other embedded videos in some of the web pages.

I am having trouble now with videos playing perfectly on some browsers but not others. I hope someone out there can help me.

I find the videos on my website plays perfectly on Chrome, Firefox and Opera but not on Internet Explorer 11 or Safari for Windows that I use for MAC, iPhone, iPad simulation checks.

The Code I use for the full-screen background video is:

        <VIDEO id="New_Banner_1" preload="auto" autoplay loop>

            <source src="common/videos/New_Banner_1.webm" type='video/webm; codecs="vp8, vorbis"' />
            <source src="common/videos/New_Banner_1.ogv" type='video/ogg; codecs="theora, vorbis"' />
            <source src="common/videos/New_Banner_1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

            <img src="common/images/New_Banner_1.png">

The source code I use for playing embedded videos is:

                    <VIDEO id="Designed_By_Me_1" preload controls>
                        <source src="common/videos/Designed_By_Me_1.webm" type='video/webm; codecs="vp8, vorbis"' />
                        <source src="common/videos/Designed_By_Me_1.ogv" type='video/ogg; codecs="theora, vorbis"' />
                        <source src="common/videos/Designed_By_Me_1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

                        <img src="common/images/Designed_By_Me_1.png">

I hope someone out there can help me out with this problem.

Thanks and kisses,