本文主要是介绍小红书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 方法返回搜狐，查看更多
责任编辑：
这篇关于小红书python上传视频_小红书 PC 首页视频如何自动播放的的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
