html5 video 在網頁上如何自動播放且適用所有瀏覽器和裝置？

js jquery autoplay html5 javascript

火爆浪子 2018-08-15 13:59:10 ‧ 13846 瀏覽

分享至

<video playsinline autoplay controls muted>
 <source src="xxx">
</video>

我發現在macOS版谷歌瀏覽器可以，但是RWD谷歌瀏覽器竟然不行
safari也可以，RWD的safari可以
RWD就是我有設定 @media screen and (max-width: 1100px){ 以下就是RWD
很怪，代碼都是一樣的，但是谷歌RWD竟然不行

還沒試過ios的谷歌和safari
和android內建瀏覽器和谷歌瀏覽器

有大神知道適用所有瀏覽器和裝置的代碼嗎？需要添加什麼js代碼輔助？

Homura iT邦高手 1 級 ‧ 2018-08-15 14:01:21 檢舉

加入loop屬性看看

火爆浪子 iT邦研究生 1 級 ‧ 2018-08-15 20:29:15 檢舉

加入loop沒有用

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-08-15 14:17:01

最佳解答

參考…
https://stackoverflow.com/questions/11525997/chrome-css-hack-and-media-queries

回應 1
分享
檢舉

火爆浪子 iT邦研究生 1 級 ‧ 2018-08-25 11:42:54 檢舉

第一次看到 (-webkit-min-device-pixel-ratio:0)

登入發表回應

炎之虛空

iT邦高手 3 級 ‧ 2018-08-15 20:09:04

$("video")[0].load();

回應
分享
檢舉

登入發表回應

andykao1026

iT邦新手 5 級 ‧ 2018-08-23 15:07:34

我自己是這樣做

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
<style>
body {
    margin:0;
}

.video {
    position: relative;
    padding-bottom: 56.3%;
    top: 0;
    height: 0;
    overflow: hidden;
}

.video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

</style>


</head>
<body>
<div class="video">
<iframe   src="https://www.youtube.com/embed/Dnj5Tcpev0Q?rel=0&autoplay=1&loop=1&&controls=0&showinfo=0&mute=1&playlist=AurAtXbmdgY" frameborder="0"></iframe>

</div>
</body>
</html>