如何在网页中插入视频

article/2025/9/27 17:22:34

想在网页中插入视频从网上搜索了大概有以下两种方法:

  1. 是由HTML5自带的标签,这个标签就可以适用于很多的浏览器,但是对视频的格式有很高的要求,假如你是MP4的视频格式,那么就要求你的编码方式一定要是AVC(H264)的。建议使用“格式工厂”这个软件来更改视频的编码。不为啥,就图个方便! 在这里插入图片描述

  2. 第二种方式使用标签。跟上述同理
    在这里插入图片描述

而且就算弄完了这些代码,还有一个问题可能出现在视频上:
首先 video 标签只支持MPEG4,Ogg,WebM 三种视频格式,浏览器支持情况如下:
在这里插入图片描述
但是,video标签对这三种视频格式是有具体要求的

Ogg = 带有 Theora 视频编码 + Vorbis 音频编码
MPEG4 = 带有 H.264 视频编码 + AAC 音频编码
WebM = 带有 VP8 视频编码 + Vorbis 音频编码

但是我这些我都弄完了但是我还是不能直接使用video这个标签来播放视频,问题的主要表现是:只能播放视频但是没有声音,视频在本地播放都是正常的。

问题已解决,经过不断的查找最后发现是被网上的教程给误导了,我添加了个不需要的标签属性,功能如下:
在这里插入图片描述

这是发现了新的问题,在H5的video标签中有两个属性,分别是autoplay和muted,这两个属性是存在冲突的:

autoplay自动播放策略
chrome66以及更高的版本不允许媒体自动播放。
safari 阻止自动播放视频。

safari阻止自动播放
出于用户体验,节省流量的考虑,移动端禁止自动播放
opera 阻止autoplay

解决策略参考:

  1. Chrome autoplay-policy
  2. safari
  3. opera autoplay
    自动播放策略:
    静音自动播放总是被允许的。

用户已经产生交互(点击触摸滑动等…) ,这里的交互指的是只要用户在页面中用有了操作,而不是说一定要用户点击audio或者video去播放

使用iframe授权自动播放
chrome提高MEI指数(?)
移动端用户将网站添加到home screen(没试过)

一、视频(video)
静音的自动播放总是被允许的。
经过测试,静音的视频元素可以自动播放。音频元素添加muted后也无法自动播放。
所以video元素可通过添加muted属性使其自动播放,然后提示用户打开声音。

二、音频(audio)
使用Web Audio API播放声音。
经过查阅发现这是一个非常强大的处理声音的API,可以实现很多的声音效果(扩音,缩音,淡入淡出等),有待学习。

三、音视频(audio+video)
在用户交互(点击,触摸滑动等操作)后,使用.paly()方法播放。
注意:用户没有产生交互前调用play()会抛出异常
使用iframe允许自动播放。

四、浏览器/参数设置 chrome - 设置开发者开关,更改chrome自动播放策略。 前往:**chrome://flags/#autoplay-policy**,设置 **Autoplay policy**开关。 safari - [safari官网](https://www.apple.com/cn/safari/)提示:可以进入Safari浏览器中的单个网站设置,启用媒体自动播放。 解决办法:

使用Web Audio API播放声音。 不直接使用autoplay进行自动播放。使用.play()方法播放。
video.play()和audio.play()都返回promise。未禁止的播放完后会resolve,禁止的会reject。
video和audio可以在用户交互(click,touch,tap等)后调用.play()播放,video还可以静音后播放。
/video.play()返回一个promise,未禁止则resolve,禁止则reject/ let video =
document.getElementById(“video”); let audio =
document.getElementById(“audio”); let videoPlay = video.play(); let
audioPlay = audio.play();

videoPlay.then(()=>{
console.log(‘可以自动播放’); }).catch((err)=>{
console.log(err);
console.log(“不允许自动播放”);
视频元素可以选择静音后再播放,提示用户打开声音
video.muted=true;
video.play();
也可以在用户交互后调用.play()
… });

audioPlay.then(()=>{
console.log(‘可以自动播放’); }).catch((err)=>{
console.log(err);
console.log(“不允许自动播放”);
//音频元素只在用户交互后调用.play(),
// … });

android h5 webview
android 4.2 webview添加了是否需要用户手势去触发音视频的播放开关,默认为true(需要用户手势触发)。
将webview的这个开关设置为不需要用户触发:
mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);
IOS h5 webview
IOS APP给webview设置mediaPlaybackRequiresUserAction后可以允许自动播放.


http://chatgpt.dhexx.cn/article/nj4R72Kv.shtml

相关文章

如何插入视频

视频插入 我们在微信小程序中,经常看见一些新闻报道除了汉字解说有的还附带着视频。这样更能吸引用户的兴趣。那么问题来了,怎样在微信小程序中插入想要的视频呢?接下来让我给大家浅薄的讲解一下吧。 这是我插入的视频: 我们在.w…

JAVA中DateTime获取当前时间

原文链接:这里! 参考代码: Test public void test(){DateTime time new DateTime(); //获取当前时间System.out.println(time); //输出当前时间 }需要传参数的可以看 这篇文章。 springMVC中从前台往后台传时间 – 每天进步一点点 (longku…

java 获取时间的方法

Java的时间是通过字节码指令来控制的,所以 java程序的运行时间是通过字节码指令来控制的。但是由于 Java程序在运行时, JVM会产生一些状态,所以在执行 JVM指令时, JVM也会产生一些状态。 我们在执行 java程序时,主要是…

java获取当前时间戳的方法

获取当前时间戳 //方法 一 System.currentTimeMillis(); //方法 二 Calendar.getInstance().getTimeInMillis(); //方法 三 new Date().getTime(); 获取当前时间 SimpleDateFormat df new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式 String date df.…

Java获取当前时间的小时/分钟

java获取当前时间的小时/分钟等。。。 方法一: Date date new Date(); int hours date.getHours();方法二: GregorianCalendar calendar new GregorianCalendar(); int hour calendar.get(Calendar.HOUR_OF_DAY); System.out.println("hour&…

Java获取当前年月日、时间

两种方法,通过Date类或者通过Calendar类。Date类比较简单,但是要得到细致的字段的话Calendar类比较方便。 import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.Loca…

Java中获取日期和时间

Java中获取日期和时间 1.创建 java.util.Calendar 实例,调用其 get()方法传入不同的参数即可获 得参数所对应的值 import java.util.Calender; //获取当前日期和时间 public class D3 {public static void main(String[] args) {Calendar c Calendar.getInstance()…

Java获取当前时间的前一天时间

Java获取当前时间的前一天时间 引入相关包具体代码实现结果 引入相关包 // 引入日期处理的相关jar包 import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date;具体使用方式可能涉及到开发过程当中,定时任务更新,获取前一…

java获取当前时间(年月日)

在java程序中常常需要获取的时间和设置时间的格式 1、获取当前的时间 Date datenew Date();//此时date为当前的时间 2、设置时间的格式 Date datenew Date();//此时date为当前的时间 System.out.println(date); SimpleDateFormat dateFormatnew SimpleDateFormat(“YYYY-…

java获取当前时间戳的方法(*)

获取当前时间戳 //方法 一 System.currentTimeMillis(); //方法 二 Calendar.getInstance().getTimeInMillis(); //方法 三 new Date().getTime();获取当前时间 SimpleDateFormat df new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式 String date df…

Java中如何获取当前日期和时间的4种方法

最近群里有一位 C 转 Java 的网友,问到“Java如何获取当前日期和时间”这个问题,知识虽然基础,但大部分网友只记得 Java8 以前的用法。本文总结了 4 种方法,其中第 4 种是 Java8 才提供的 API。 System.currentTimeMillis() 获…

P2822 [NOIP2016 提高组] 组合数问题

题目: 思路: 如果纯暴力,把所有小于2000并且%k的组合数都求出来,能拿个90分 改进方案,可采用前缀和的方法 二维的组合数的求法a[i][j]a[i-1][j]a[i][j-1]-a[i-1][j-1] 前缀和 这里还需要注意以下两个点: 1.如果当前…

【NOIP2016提高组】愤怒的小鸟

题目背景 NOIP2016 提高组 Day2 T3 题目描述 Kiana 最近沉迷于一款神奇的游戏无法自拔。简单来说,这款游戏是在一个平面上进行的。 有一架弹弓位于 (0,0) 处,每次 Kiana 可以用它向第一象限发射一只红色的小鸟,小鸟们的飞行轨迹均为形如 …

P2058 [NOIP2016 普及组] 海港

题目描述 小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客。 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只情况;对于第i艘到达的船,他记录了…

NOIP 2016 年普及组初赛试题整理

#include <iostream> using namespace std; int readint() {int num 0; // 存储读取到的整数int negative 0; // 负数标识char c;c cin.get(); // 存储当前读取到的字符while ((c < 0 || c > 9) && c ! -)c ① ;if (c -)negative 1;else② ;c cin.g…

「NOIP2016」玩具谜题

小南有一套可爱的玩具小人&#xff0c;它们各有不同的职业。 有一天&#xff0c;这些玩具小人把小南的眼镜藏了起来。小南发现玩具小人们围成了一个圈&#xff0c;它们有的面朝圈内&#xff0c;有的面朝圈外。如下图&#xff1a; 这时singer告诉小南一个谜题&#xff1a;“眼镜…

【NOIP2016提高组】蚯蚓

蚯蚓 题目背景 NOIP2016 提高组 Day2 T2 题目描述 本题中&#xff0c;我们将用符号 表示对 c 向下取整&#xff0c;例如&#xff1a; 蛐蛐国最近蚯蚓成灾了&#xff01;隔壁跳蚤国的跳蚤也拿蚯蚓们没办法&#xff0c;蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓。 蛐蛐国里…

NOIP2016提高组 day1

1.玩具谜题 题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业。 有一天, 这些玩具小人把小南的眼镜藏了起来。 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外。如下图: 这时 s i n g e r singer singer告诉小南一个谜題: “眼镜藏在我左数第3个玩具…

[NOIP2016 普及组] 魔法阵

[NOIP2016 普及组] 魔法阵 - 洛谷 题意分析 给定一个四元组&#xff0c;四个数分别为a,b,c,d&#xff0c;满足以下条件&#xff1a; 1.a<b<c<d 2.b-a2*(d-c) 3.b-a(c-b)/3 //注意是实除 现在给你一个序列X&#xff0c;请你求出序列X中每个数分别作为a,b,c,d的个数。…

NOIP 2016 普及组

文章目录 T1 买铅笔T1分析 T2 回文日期T2分析 T3 海港T3分析 T4 魔法阵T4分析 T1 买铅笔 题目点击→计蒜客 [NOIP2016]买铅笔 题目描述 P 老师需要去商店买 n n n 支铅笔作为小朋友们参加 NOIP 的礼物。她发现商店一共有 3 3 3 种包装的铅笔&#xff0c;不同包装内的铅笔数…