我正在尝试使用JQuery控制HTML5视频.我在选项卡式界面中有两个剪辑,总共有六个选项卡,其他只有图像.我试图在单击其选项卡时播放视频剪辑,然后在单击任何其他选项卡时停止播放.
这必须是一件简单的事情,但我似乎无法让它工作,我用来播放视频的代码是:
$('#playMovie1').click(function(){
$('#movie1').play();
});
我已经读过视频元素需要在函数中公开以便能够控制它但是找不到示例.我能够使用JS工作:
document.getElementById('movie1').play();
任何建议都会很棒.谢谢
我收到错误消息..
未捕获(在promise中)DOMException:play()失败,因为用户没有先与文档交互.
..当尝试使用Chrome版本66在桌面上播放视频时.
我找到了一个在网站上自动开始播放的广告,但使用以下HTML:
<video
title="Advertisement"
webkit-playsinline="true"
playsinline="true"
style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
autoplay=""></video>
那么,绕过Chrome的V66的自动播放拦截真的那么容易,因为只需添加webkit-playsinline="true",playsinline="true"和autoplay=""属性的<video>元素？对此有任何负面影响吗？
我有一些奇怪的问题.我尝试创建一个带有循环背景视频的网站.代码看起来像这样:
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>这在大多数浏览器上运行得非常好(IE很难用这个适合对象的东西,但我不介意),但在iPhone上,视频不会自动播放,但在iPad上却可以.我已经阅读了iOS的新政策,我认为我符合要求(否则iPad不会自动播放).我做了一些其他测试:
我做错了还是iPhone根本不会自动播放视频而且总是需要互动？我只关心iOS 10,我知道iOS 9的要求不同
据我所知，HTML5仅muted在野生动物园中自动播放。
但是，YouTube能够自动播放带音频的视频。
youtube是否从Safari获得例外？
他们是如何做到的？
例如，如果您访问https://www.youtube.com/watch?v=5dpIPeTgA64，则视频将自动播放音频。
谢谢。
我尝试在堆栈溢出和谷歌上搜索，但没有找到可以帮助我的文章。即使我使用了自动播放，它也会显示暂停的视频。谁能帮帮我吗 ？我是 react.js 的新手
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import * as ReactBootstrap from 'react-bootstrap';
import coverimg from './hw.jpg';
import covervid from './hw.mp4';
import covervidtwo from './hw.ogv';
class Slider extends Component {
render() {
return (
<div className="">
<video loop autoplay>
<source src= { covervid } type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src={ covervidtwo } type="video/ogg" />Your browser does not support the …所以我用AnyConverter做一个转换.mov到.mpf,.ogv和.webm格式.然后我将它们放在视频目录中并使用以下代码
<video width="500" height="281">
<source src="/video/video.mp4" type="video/mp4" />
<source src="/video/video.ogv" type="video/ogg" />
<source src="/video/video.webm" type="video/webm" />
</video>
但是,该视频未在Sarari,Chrome或Firefox最新版本中显示.我正在使用HTML 5 Doctype而不确定发生了什么.有什么建议？
编辑
奇怪的是,我改变了完整网址的路径,但仍然无法正常工作.然后当我在Firefox中粘贴网址时播放视频.我想知道它是否在视频标签之外...
我正在尝试使用 html5 视频在滑块中显示视频。这与controls参数（显示控件）配合得很好。但是当我添加它时autoplay，它不会自动播放，所以我搜索了原因，发现 chome 只允许静音视频自动播放。
所以我muted向其中添加了参数，但是当我这样做时，我的整个视频变黑并且仍然无法自动播放。
为什么会这样呢？
我的代码：
<div class="r-slider-item">
<video width="100%" height="100%" autoplay muted loop>
<source src="assets/watertuin.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="container">
<div class="r-slider-top-content">
<h1 class="animated fadeInDown">RESERVEER <span>NU</span></h1>
<a href="#" class="btn btn-outlined animated fadeInUp"> Reserveren </a>
</div>
</div>
</div>
在 Firefox 和 IE 11 中它工作得很好。
我有一个视频（用于背景目的），该视频已静音，我打算自动播放。如果我将以下代码放入 html 文件中：
<video playsinline autoplay muted loop>
<source src="https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4">
</video>
它在 Chrome 上运行得很好。
然而，如果我使用 DOM 操作插入完全相同的视频，我会在 Chrome 上遇到麻烦，但在 Firefox 等其他浏览器中会成功。
<html>
<body>
</body>
<script>
function render() {
const video = document.createElement('video');
video.setAttribute('muted', true);
video.setAttribute('autoplay', true);
video.setAttribute('loop', true);
video.setAttribute('playsinline', true);
const source = document.createElement('source');
source.setAttribute('src', 'https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4');
video.appendChild(source);
document.body.appendChild(video);
}
render();
</script>
</html>
Chrome 因阻止自动播放而臭名昭著。一般的解决方案是要么静音（我已经这样做了），要么使用 dom 操作来调用 play（这不起作用）。将视频插入 dom 后，有没有办法让它发挥作用。我关心的原因是因为我的实际网站需要渲染所有内容（我的网站位于 ember.js 中）。
这是 Chrome 版本 71 中的内容。
谢谢！