视频在firefox中运行良好,但Chrome和Safari正在引起问题,我之前在网站上使用过这个确切的代码并且工作正常,但视频实现为一行背景。
在注册表单上的每一步中都会加载一个新的视频标记,这可能会导致chrome / safari中的问题。
我已经为标签添加了额外的.ogg文件类型以及使用不同的自动播放功能进行播放,但仍然无法在safari和chrome中生效。
视频确实出现但不播放......任何帮助都将不胜感激。
请在下方找到托管链接
http://www.onlyukdating.com/staging/nick/f-buddy/
我正在使用的HTML代码是
<div id="fstep_1">
<video id="bgvid" preload="auto" muted autoplay="true" loop >
<source src="_img/step1.webm" type="video/webm" codecs="vp8, vorbis">
<source src="_img/step1.mp4" type="video/mp4">
<source src="_img/step1.ogv" type="video/ogg" codecs="theora, vorbis">
</video>
<p>I'm a</p>
<select name="gender" id="dating-gender" class="required gender">
<option value="1" selected="selected"><font color="#000">Man looking for a Woman</font></option>
<option value="2"><font color="#000">Woman looking for a Man</font></option>
</select>
</div>
<div id="fstep_2">
<video autoplay muted loop id="bgvid">
<source src="_img/step2.webm" type="video/webm">
<source src="_img/step2.mp4" type="video/mp4">
</video>
<p>How old are you?</p>
<div class="drop_down_container">
<select name="dobmonth" id="dobmonth" class="required">
<option value=""><font color="#000">Month</font></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dobday" id="dobday" class="required">
<option value=""><font color="#000">Day</font></option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
<option value="5">5th</option>
<option value="6">6th</option>
<option value="7">7th</option>
<option value="8">8th</option>
<option value="9">9th</option>
<option value="10">10th</option>
<option value="11">11th</option>
<option value="12">12th</option>
<option value="13">13th</option>
<option value="14">14th</option>
<option value="15">15th</option>
<option value="16">16th</option>
<option value="17">17th</option>
<option value="18">18th</option>
<option value="19">19th</option>
<option value="20">20th</option>
<option value="21">21st</option>
<option value="22">22nd</option>
<option value="23">23rd</option>
<option value="24">24th</option>
<option value="25">25th</option>
<option value="26">26th</option>
<option value="27">27th</option>
<option value="28">28th</option>
<option value="29">29th</option>
<option value="30">30th</option>
<option value="31">31st</option>
</select>
<select name="dobyear" id="dobyear" class="required">
<option value=""><font color="#000">Year</font></option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
</select>
</div>
</div>
<div id="fstep_3">
<video autoplay muted loop id="bgvid">
<source src="_img/step3.webm" type="video/webm">
<source src="_img/step3.mp4" type="video/mp4">
</video>
<p>Whats your first name</p>
<input type="text" title="Enter your first name" placeholder="First name" name="firstname" id="dating-firstname" class="required"/>
</div>
<div id="fstep_4">
<video autoplay muted loop id="bgvid">
<source src="_img/step4.webm" type="video/webm">
<source src="_img/step4.mp4" type="video/mp4">
</video>
<p>Whats your email</p>
<input type="text" name="email" placeholder="Email address" id="email" class="required email"/>
</div>
<div id="fstep_5">
<video id="bgvid" muted loop autoplay >
<source src="_img/step5.webm" type="video/webm">
<source src="_img/step5.mp4" type="video/mp4">
</video>
<p>Add a password</p>
<input type="password" id="dating-password" placeholder="Choose a password" class="multistep required valid" name="password" value=""/>
<input type="hidden" id="custom1" name="custom1"/> <input type="hidden" id="custom2" name="custom2" value=""/>
<input type="hidden" id="custom3" name="custom3" value=""/>
</div>
</form>