小红书python上传视频_小红书 PC 首页视频如何自动播放的

原标题：小红书 PC 首页视频如何自动播放的

之前处理过微信内全屏视频自动播放、app 客户端内嵌 video 自动播放，最近有一个需求 pc 上的局部视频自动播放

其实市面上一些 pc 站还是有类型的案例的，我们先看一下小红书的做法：

先看一下挂载到网页上的 html video：

data-v-c83fec30= ""

poster= "**"

loop= "loop"

src= "**.mp4"

preload= "auto"

class= "my-video">

video>

他们用了 vue + webpack 打包，这种标准的 data-v-** 就是 style scoped 导致的非人工代码

我们看编译之后的文件：

e(" video", {

staticClass: "my-video",

attrs: {

poster: this.videoSelector.poster,

loop: "",

src: this.videoSelector.src,

preload: "auto"

},

domProps: {

muted: this.ifMuted

}

})

熟悉 vue template 转换之后的数据对象，应该能看懂这个：

1、staticClass

2、attrs

3、domProps

转换数据之后：

n( "video", {

staticClass: "my-video",

attrs: {

poster: "**",

muted: "",

loop: "loop",

src: "**.mp4",

preload: "auto"

},

domProps: {

muted: ! 0

}

})

第一个问题：video 的几个属性 muted、loop 属性干嘛的？

muted： 看看 MDN

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

布尔属性，指明了视频里的音频的默认设置。

设置后，音频会初始化为静音。

默认值是 false,意味着视频播放的时候音频也会播放 。

上面的 muted 对应的值其实是 true(!0)

loop：

布尔属性；

指定后，会在视频结尾的地方，自动返回视频开始的地方。

这里也没有看到最常规的自动播放配置： autoplay

bool

视频就会开始自动播放，而且无需停止加载任何数据。

还有一个在 mounted 钩子里面的：

mounted: function( ){

this.loadVideo

}

然后 loadVideo 的细节：

methods: {

loadPhoneVideo: function( ){

vart = document.querySelector( ".iphone-mp4 .my-video");

t.addEventListener( "loadeddata", ( function( ){

t.readyState >= 2&& t.play

}

))

}

},

这里其实还是操作的 dom，但是 没有用到 ref

而是简单的 document.querySelector 来获取 dom，然后监听 loadeddata 事件，再调用 play 方法返回搜狐，查看更多

责任编辑：