我在这个论坛上发现了许多关于嵌入youtube视频和自动播放的问题,但没有一个问题清除我的疑虑.
我找到了两种在UIWebView中嵌入youtube视频的方法
1)
NSString *youTubeHTMLTemplate = @"<html><head><style type=\"text/css\">body { background-color: transparent;color: white;}</style></head><body style=\"margin:0\"><embed id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" width=\"%0.0f\" height=\"%0.0f\"></embed></body></html>";
finalHtml = [NSString stringWithFormat:youTubeHTMLTemplate, fullYopuTubeUrl, htmlFrameWidth, htmlFrameHeight];
Run Code Online (Sandbox Code Playgroud)
2)
NSString *youTubeHTMLTemplate = @"<html><body style=\"margin:0;padding:0;\"><iframe class=\"youtube-player\" type=\"text/html\" width=\"%f\" height=\"%f\" src=\"http://www.youtube.com/embed/%@\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
finalHtml = [NSString stringWithFormat:youTubeHTMLTemplate, htmlFrameWidth, htmlFrameHeight, videoID];
Run Code Online (Sandbox Code Playgroud)
如果我使用(1)方法并按照这里给出的方法我的视频自动播放.想法是在UIWebView中找到按钮并向其发送触摸事件.
如果我使用(2)并遵循相同的方法,视频不会自动播放.
我认为建议使用(2)方法,因为(1)仅用于Flash视频(对吗?).
无论如何(2)是可能的吗?这个链接说不.
谁能证实
我正在做一个小方案.
我能够嵌入并显示指定的vine.co视频
<iframe id='eFrame' src='http://vine.co/v/bJjdTLBnwx1/card' width='380' height='380' frameborder='0'></iframe>
Run Code Online (Sandbox Code Playgroud)
我通过Ajax拉链接在页面上显示它们,但现在问题是它们都是自动播放,这导致主要的浏览器滞后.
任何人都知道如何禁用自动播放将它们附加到身体上?这个项目都是客户端,所以我将仅限于客户端语言.(即Javascript/jQuery等..)
非常感谢,干杯.
我在Bootstrap视频中有一个Vimeo iframe视频.我需要让它在我触发模态时开始播放并在模态关闭时停止播放.目前我可以通过拥有没有src属性的iframe并在触发模态上填充jQuery来开始模态打开.这是代码片段;
jQuery("#videogumb").click(function() {
jQuery('#myModal .modal-body iframe').attr('src','the-source-code');
});
Run Code Online (Sandbox Code Playgroud)
这工作正常,我开始模态打开时开始,但当我关闭模态时,音乐继续在后台播放.
另一种方法可以正常工作,但仅用于关闭模态而不将其设置为自动播放.所以autoplay设置为0,我有这个片段;
jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});
Run Code Online (Sandbox Code Playgroud)
当我关闭模态时,这会停止视频.我需要以某种方式结合这个.当模态打开时我需要自动播放并在模态关闭时停止播放.
有线索吗?
谢谢.
我有以下问题.这是代码:
<div class="article-content-wrapper>
<%= video_tag 'Garden.mp4', :class => "video", :controls => true %>
</div>
Run Code Online (Sandbox Code Playgroud)
在鼠标悬停时,我希望视频进入自动播放/恢复,在鼠标输出时,视频要暂停.
我怎么能用JQuery做到这一点?我在JQuery网站上搜索了很多,但我找不到任何东西给我.我试过的代码不起作用.
cSlider:在单击显示时停止滑块或JQuery自动播放视频中的鼠标悬停 或 自动播放视频的自动播放
谢谢您的帮助.
出于可理解的原因,移动浏览器会阻止视频自动播放。我的网站上有视频背景,因此控制按钮毫无疑问,但是我认为我可以弹出带有一些信息和按钮的窗口,用户可以在其中接受背景视频(触发手动播放),也可以不接受。将其更改为一些静态图片。
所以问题是:有没有办法判断自动播放是否被浏览器打断了?
我试过了,onerror但它没有触发,所以我也尝试了onsuspend:
HTML:
<video id='bgvid' src='bgvid.mp4' type='video/mp4' autoplay loop onsuspend='video_suspended()'>
Run Code Online (Sandbox Code Playgroud)
Javascript:
function video_suspended() {
$bgvideoElement=$("#bgvid").get(0);
//Check if reason for suspend was completion or browser interruption
if($bgvideoElement.readyState<1) {
//Here comes some pop-up window and a button to
$bgvideoElement.play();
}
}
Run Code Online (Sandbox Code Playgroud)
它在平板电脑(Chrome)上可以正常工作,但在台式机(Chrome)上onsuspend可以无限触发(尽管Firefox还可以)。
关于Chrome问题或其他替代方案有什么想法吗?
当用户在浏览器上打开页面时,我正在尝试自动播放视频.在我的笔记本电脑上,自动播放适用于所有浏览器,但在Android上它不适用于谷歌浏览器,而在iPhone中它不适用于Safari.我已经做了一个搜索和android中的谷歌浏览器不支持html5视频标签,所以我使用了一些JavaScript,但它也不起作用.为什么?我该怎么办?这是我的代码
<video id="video" autoplay autobuffer controls="controls" allowFullScreen >
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm" webView.mediaPlaybackRequiresUserAction = NO;>
<source src="video.theora.ogv" type="video/ogg">
<source src="video.flv" type="video/flv">
<source src="video.vob" type="video/vob">
<source src="video.mov" type="video/mov">
</video>
<script type="text/javascript">
var video = document.getElementById('video'); video.addEventListener('video',function(){
video.play();
});
video.addEventListener("domready", function(){ video.play();
});
video.addEventListener("ended", function(){
window.location = "http://www.google.com"
});
</script>
Run Code Online (Sandbox Code Playgroud) 我有一个带有自动播放和静音选项的嵌入 VIMEO 视频。我正在尝试制作一个自定义功能,让用户通过自定义按钮取消我的视频静音。它工作正常,但在 Chrome 中(尤其是在 Android 中),因为它给了我这个错误:
Unmuting failed and the element was paused instead because the user didn't interact with the document before.
Run Code Online (Sandbox Code Playgroud)
但是如果你阅读他们的文档,它会说:
吸引用户的一种很酷的方法是使用静音自动播放并让他们选择取消静音(请参阅下面的代码片段)。一些网站已经有效地做到了这一点,包括 Facebook、Instagram、Twitter 和 YouTube。
<video id="video" muted autoplay>
<button id="unmuteButton"></button>
<script>
unmuteButton.addEventListener('click', function() {
video.muted = false;
});
</script>
Run Code Online (Sandbox Code Playgroud)
那么,有什么问题呢?我的代码看起来像:
var options = {
id: 316816937,
width: 990,
loop: true,
autoplay: true,
mute: true,
};
var player = new Vimeo.Player('embeddedVideo', options);
player.setVolume(0);
player.on('play', function() {
console.log('played the video!');
});
$(".videoWrapper .cover").click(function () {
$(this).addClass("close");
player.ready().then(function …Run Code Online (Sandbox Code Playgroud) 我想自动滑动离子滑块,但无法正常工作。滑块还包含图像。数据来自API调用。
<ion-slides autoplay="5000" loop="true" speed="300" pager="true" >
<ion-slide *`ngFor`="let item of topStories">
<ion-card (click)=" this.newsService.onGoToTopStoryPage(item)">
<ion-card-content >
<ion-img [src] = "item.image"></ion-img>
<h2> <b>{{item.title}} </b></h2>
<h4>{{item.summary}}</h4>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
Run Code Online (Sandbox Code Playgroud) 我有一个问题,我的 WordPress 博客嵌入了来自 Imgur 的视频。它在加载时自动播放。它也会自动循环。它与此嵌入 HTML 完美配合。但是,当我们将其滚动到屏幕外时,它并没有停止。滚动时如何停止它?谢谢
<center><video style="max-width: 100%; height: auto;" preload="auto" autoplay="autoplay" loop="loop" controls="controls" width="450" height="auto"><source src="https://i.imgur.com/84FAg6j.mp4" /></video></center>
Run Code Online (Sandbox Code Playgroud) 所以我在我的网站上使用 glider.js ( https://nickpiscitelli.github.io/Glider.js/ ) 来处理幻灯片,因为我真的想保持最小化(我知道还有其他滑块,但 glider.js 是最轻的)。然而,我确实需要自动播放功能,但我似乎无法让它工作(我不太了解JS,我只是复制我需要的代码片段)
我找到了一些自动播放的代码,如下所示:
function sliderAuto(slider, miliseconds) {
slider.isLastSlide = function() {
return slider.page >= slider.dots.childElementCount - 1;
}
var slide = function() {
slider.slideTimeout = setTimeout(function() {
function slideTo() {
return slider.isLastSlide() ? 0 : slider.page + 1;
}
slider.scrollItem(slideTo(), true);
}, miliseconds);
}
slider.ele.addEventListener('glider-animated', function(event) {
window.clearInterval(slider.slideTimeout);
slide();
});
slide();
}
Run Code Online (Sandbox Code Playgroud)
但我不知道如何激活它,使其发挥作用。我知道我应该将参数传递给“滑块”和“毫秒”,但我不知道我到底应该传递什么,我应该为每张幻灯片设置一个特殊的类,然后传递该类吗?假设我的 html 如下:
<div class="glider-contain">
<div class="glider">
<div>your content here</div>
<div>your content here</div>
<div>your content here</div>
<div>your content here</div>
</div>
Run Code Online (Sandbox Code Playgroud)
如何让自动播放工作?谢谢!