整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
能是出于节省用户流量，许多移动端浏览器都不支持H5自动播放视频，必须在用户主动交互（点击或者滑动等）后才可以通过js播放视频
PC端可以通过设置muted，自动播放静音视频
安卓浏览器均不支持自动播放，实测在微信内置浏览器，滑动视为交互行为，可以在这之后播放视频，抖音内置浏览器则需要点击交互，鸿蒙系统浏览器可以自动播放静音视频
进入网站时弹窗，例如欢迎语等，用户点击关闭后执行视频播放
简单粗暴的方法，在某些场景时适用的，实测在安卓、鸿蒙、IOS、抖音浏览器等均可以用这个方法解决
close() {
const videos = document.querySelectorAll('video');
for (let i = 0; i < videos.length; i++) {
const element = videos[i];
element.play();
}
}
【更多音视频学习资料，点击下方链接免费领取↓↓，先码住不迷路~】
点击领取→音视频开发基础知识和资料包
将视频转成ts格式，通过jsmpeg解码器进行加载播放，可以实现自动播放，实测基本上可以解决所有移动端无法播放视频的问题
转ts
安装ffmpeg，输入命令将mp4转成ts
ffmpeg.exe -i in.mp4 -f mpegts -codec:v mpeg1video -s 680x1080 -b:v 2074k -r 29.97 out.ts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
// 引入jsmpeg
<script src="./jsmpeg.min.js"></script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" height="750" width="750"></canvas>
<script>
var canvas = document.querySelector("#canvas");
// 加载ts文件
var player = new JSMpeg.Player("./out.ts", {
canvas: canvas,
loop: true, // 循环播放
autoplay: true, // 自动播放
audio: false, // 禁用音频
});
player.play();
</script>
</body>
</html>
<video webkit-playsinline="webkit-playsinline" playsinline></video>如果你对音视频开发感兴趣，觉得文章对您有帮助，别忘了点赞、收藏哦！或者对本文的一些阐述有自己的看法，有任何问题，欢迎在下方评论区讨论！
们做安卓开发时，webview中发现html5 视频的autoplay根本没实现，查看了下android 源码HTMLVideoElement.cpp也未见相应处理，网上有资料显示，这可能关乎UI线程与后台线程的协调性，我看，以后的升级版本总会解决这个问题的。
html5标签属性不支持，那只有通过javascript来处理了
演示apk下载地址：http://download.csdn.net/detail/qiushi_1990/9513038
github源码下载：https://github.com/qiushi123/H5Demo
下面是实现步骤和原理
不要忘记了webview.getSettings().settings.setJavaScriptEnabled(true)启用javascript,AndroidManifest加入INTERNET权限
@Override
public void onPageFinished( WebView view, String url) {
view.loadUrl("javascript：try{autoplay();}catch(e){}");
}
实例代码
public class Html5VideoAutoPlay extends Activity {
WebView webview = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.html5video);
webview = (WebView)findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient(){
/**
* 当前网页的链接仍在webView中跳转
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
/**
* 处理ssl请求
*/
@Override
public void onReceivedSslError(WebView view,
SslErrorHandler handler, SslError error) {
handler.proceed();
}
/**
* 页面载入完成回调
*/
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl("javascript：try{autoplay();}catch(e){}");
}
});
webview.setWebChromeClient(new WebChromeClient() {
/**
* 显示自定义视图，无此方法视频不能播放
*/
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
super.onShowCustomView(view, callback);
}
});
webview.loadUrl("file:///sdcard/html/video.html");
}
@Override
protected void onPause() {
if(null != webview) {
webview.onPause();
}
super.onPause();
}
}
html5video.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>
video.html
<body>
<video id="video" src="b.mp4" width="480" height="320" controls loop>
don't support html5
</video>
</body>
<script type="text/javascript">
var video = document.getElementById("video");
video.play();
</script>
上面的src可以引入本地视频b.mp4,
也可以引入网上视频：http://2449.vod.myqcloud.com/2449_43b6f696980311e59ed467f22794e792.f20.mp4
个人觉得html5结合Android会让未来各种技术实现越来越简单。到我的个人博客查看更多h5与安卓的结合案例。
也可以关注我github里的其他开源项目。
github：https://github.com/qiushi123?tab=repositories
实例图片
效果图
编程小石头，为分享干货而生！据说，每个年轻上进，颜值又高的互联网人都关注了编程小石头。
/ Peggy Chi，高级研究员，Irfan Essa，高级工程师，Google研究院
译者 / Alpha
原文 / https://ai.googleblog.com/2020/10/experimenting-with-automatic-video.html
在Google，我们正在积极探索在制作多媒体内容时，人们如何使用由机器学习和计算方法提供的创造性工具，从创作音乐、重新架构视频，到绘画等等都涉及到了这方面内容。尤其是视频制作这样一个颇具创意的过程，它可以很好地受益于这些工具，因为它需要做出一系列决策，确定哪些内容最适合目标受众，如何在视图中妥善排布现有资源，以及怎样进行时间安排能够带来最具吸引力的描述。但假如一个人能利用现有的资源，比如一个网站，来开启视频创作呢？大多数企业主办的网站都呈现了关于其产品或服务丰富的视图内容，所有这些内容都可以被重新应用到其他多媒体格式，比如视频，这可能使那些没有大量资源的人能够接触到更广泛的受众。
2020年UIST上发表的“网页端视频的自动化制作”里，我们介绍了一种基于内容所有者提供的时间和视图限制，将网页自动转换为短视频的研究原型——URL2Video。URL2Video从HTML源中提取资源（文本、图像或视频）及其设计风格（包括字体、颜色、图形布局和层次结构），并将这些可视资源组合成一系列的快照，同时保持与源页面相似的外观和感觉，然后根据用户指定的纵横比和持续时间，将这些材料重新利用，渲染成一个适合产品和服务广告的视频。
URL2Video概述
假设用户提供了一个阐述他们业务的网页URL，URL2Video会自动从页面中选择关键内容，并根据一组针对熟悉网页设计和视频广告制作的设计师的访谈研究得到的启发式算法，决定每个资源的时间和视图展示。这些如设计师般熟知的启发式算法捕获常见的视频编辑样式，包括内容层次结构，限制一个快照中的信息量及其持续时间，为品牌提供一致的颜色和样式等等。利用这些信息，URL2Video解析网页，分析内容，选择视觉突出的文本或图像，同时保留它们的设计风格，并根据用户提供的视频规范进行组合。
通过在输入的网页中提取结构内容和设计，URL2Video做出自动编辑决策，在视频中呈现关键信息。它考虑到用户定义的输出视频的时间限定（比如以秒为单位的持续时间）和空间限定（比如高宽比）。
网页分析
一个网页的URL，URL2Video会提取它的文档对象模型（DOM）信息和多媒体材料。出于研究模型的目的，我们将域限制在静态网上，这些页面包含HTML层次结构中保存的突出资源和标题，这些层次结构遵循最近的网页设计原则，鼓励使用重点的元素、更清晰的部分以及引导读者感知信息的视觉焦点顺序。URL2Video将这些视觉上可区分的元素标记到资源组的候选列表，每个元素可能包含一个标题、一个产品图象、详细描述和调用操作按钮，并捕获每个元素的原始素材（文本和多媒体文件）和详细的设计规范（HTML标签、CSS样式和呈现位置）。然后，通过根据每个资源组的视觉外观和注释，包括它们的HTML标签、呈现的尺寸还有显示在页面上的顺序对每个组进行排序。这样，在页面顶部占据较大区域的资源组将获得更高的分数。
限定型的资源选择
在制作视频时，我们考虑了两个目标：（1）每个镜头都应该提供简洁的视频信息；（2）视觉设计应该与源网页一致。基于这些目标和用户提供的视频限定条件，包括预期的视频持续时间（以秒为单位）和高宽比（通常为16:9、4:3、1:1等），URL2Video自动选择并命令资源组优化总体优先级分数。为了使内容简洁，它只显示页面中的主要元素，例如标题和一些多媒体资源。它限定了观众所感知内容的每个视觉元素的持续时间。这样，简短的视频强调了页面顶部最突出的信息，时间长一些的视频则包含了更多的商业活动或产品信息。
画面构图与视频渲染
根据基于DOM层次结构的有序资源列表，URL2Video并行依照从访谈研究中获得的设计启发，对时间和空间安排做出决策，将资源在单个镜头中展现出来。它将元素的图形布局转换为视频的纵横比，并应用了包括字体和颜色在内的样式选择。为了使视频更具动感和吸引力，它调整了资源的显示时间。最后，它将内容渲染为MPEG-4格式的视频。
用户控制
研究原型界面允许用户查看源网页提取的每个视频镜头中的设计属性，以及重新排版材料，更改细节设计，如颜色和字体，并更改限制条件来生成新的视频。
在URL2Video的创作界面（左）中，用户指定源页面输入的URL、目标页面视图的大小以及输出视频参数。URL2Video分析网页，并提取主要的视觉组件。由它组成了一系列的镜头，并将关键画面可视化为一个故事板。这些组件满足输入时间和空间限定后输出呈现为视频。用户可以播放视频，检查设计属性（右下角），并进行调整以做视频更改，例如重新排序镜头（右上）。
URL2Video用例
我们在现有的各种网页上演示了端到端的URL2Video的性能。下面我们特别展示一个实例结果，其中URL2Video将嵌入多个短视频剪接的页面转换为一个12秒的输出视频。请注意它如何在从源网页面捕获的视频中对字体和颜色选择、时间和内容排序作出自动编辑决定的。
URL2Video从我们的Google搜索介绍页面（顶部）识别关键内容，包括标题和视频资源。通过综合考虑显示流程、源设计和输出限定，URL2Video将它们转换为视频（12秒的横向视频；底部）
下面的视频作了进一步的演示：
https://www.youtube.com/watch?v=3yFYc-Wet8k&feature=youtu.be
为了评估自动生成的视频，我们与Google的设计师进行了一项用户研究。实验结果表明，URL2Video能够有效地从网页中提取设计元素，并通过引导视频创建的过程为设计师提供支持。
下一步
虽然目前的研究集中在视觉展示，但我们正在开发新的技术，以在视频编辑中支持音轨和画外音。总之，我们设想的未来是，创作者专注于做出高层决策，而机器学习模型配合其在多个平台上为最终视频的制作提供详细的时间和图形编辑建议。
致谢
我们非常感谢我们的论文合著者Zheng Sun（Research）和Katrina Panovich（YouTube）。我们还要感谢我们的同事，他们（按姓氏的字幕顺序）-JordanCanedy, Brian Curless, Nathan Frey, Madison Le, Alireza Mahdian, Justin Parra,Emily Ryan, Mogan Shieh, Sandor Szego和Weilong Yang-为URL2Video作出了贡献。我们感谢我们的领导人Tomas Izo, RahulSukthankar和Jay Yagnik的支持。
*请认真填写需求信息，我们会在24小时内与您取得联系。
